5 Common CSS Mistakes

Tuesday, March 1st, 2011

5 Common CSS Mistakes

As promised, this week I’m continuing my list of common mistakes, but moving from HTML to the realm of CSS. The rules are a little different with CSS, as you’ll see, but I’m still not going to tell you that you shouldn’t use perfectly valid practices just because of my own personal preference.

1. Only one font-family option

When using the font-family property, you should always end with a generic family – like “serif”, “sans-serif”, “monospace”. That way if the user doesn’t have any of the specific fonts you wanted to use, at least they’ll see a similar type of font. It’s also a good idea to include a couple specific fonts – one PC version and one Mac version, for example. Often the two platforms ship with similar fonts to each other, but not the exact same ones.

2. Avoidance of beta CSS3

Some people recommend you avoid using not-standard-yet CSS3 properties, or their browser-specific beta versions, such as -webkit-transform, -moz-transition, and text-shadow. The reasoning generally involves two points – your CSS won’t validate, and the experience will be different for browsers that don’t support the properties. While it’s true that your CSS will be technically invalid, this is not actually a big deal. Unlike HTML, where invalid elements will cause serious problems, with CSS, browsers that don’t support those properties will simply ignore them. It’s also true that some browsers won’t see the effects of the properties, but as long as they’re non-essential, why not give users with CSS3-supporting browsers a little extra touch, rather than depriving everyone of them?

3. Reliance on beta CSS3

On the other hand, you don’t want to use CSS3 properties or values to the point that the experience is ruined for other browsers. For example, using the HSLA color value without a fallback will cause many browsers to use default coloring for those properties. In my opinion this is very unfortunate, since it basically removes the benefit of more intuitive color modification, but several years down the road, only very outdated browsers won’t support it, and that’s when the benefit will really come.

4. Misuse of classes/IDs

This is something that’s partly HTML and partly CSS, but generally it’s caused by wanting to add CSS hooks, so I think it falls slightly on the CSS side. One thing I see a lot is every paragraph or every list item given the same class. Generally, you want to style all the paragraphs the same way using the “p” selector, and then add classes to exceptions. If you have to have a class on every paragraph to keep the style consistent, you’re making it more difficult to maintain your code – particularly if you use a WYSIWYG editing program or CMS. The other problem is using IDs as if they’re classes. Any given ID may be used only once in an HTML document. If you have several elements that need to be styled the same way, use an element selector or class.

5. Not using shorthand properties

This won’t break anything, but it will make your CSS unnecessarily large and harder to manage. Declaring border-width, border-color, border-style separately adds extra lines and increases the chance of mistakes compared to setting all three with the “border” shorthand property. Similarly, setting things like padding or margin with their respective -top -right -bottom -left properties (unless you’re only changing one) is extraneous as well.

I would like to mention a couple of more preference-based tips. I’ve seen several people recommend not using color names, claiming that “color:red;” tells the browser to render whatever it “thinks red is.” While this may be somewhat true for colors like LightGoldenRodYellow or MediumSeaGreen, I have yet to see a browser that renders Red as anything but #F00 or White as anything but #FFF. In my opinion, using color names improves readability. The other major tip I’ve seen that I disagree with is using a unit less 0 for dimensions. While it’s true that 0 is the same value as 0px or 0% or 0em, I agree with the people I’ve seen assert that maintaining units on all properties improves readability and makes it easier to change values later. And for one or two characters each time, I’m not really worried about the extra file size.

About Matcha Design

Matcha Design is a full-service creative B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like