Take the 2-minute tour ×

This morning I found a note on my desk with some tips from a higher up developer who had been looking over some HTML/CSS I had put together.

One of his suggestions was for me to "stay away from context-based class and ID names like 'left' or 'right.' Never use colors as names. Stick to semantic names based on the content."

Is this valid advice? Why?

share|improve this question
Well, what happens when the 'left' class, applied to the sidebar, is supposed to be somewhere else? Or the 'blue' classed div should be green? Then you have to alter the markup, making it fragile to appearance-only changes. –  Max Jul 18 '12 at 13:52
It is most definitely valid advice. If you use a class name with a color or style in it (like bold-blue-label{}) you have done something wrong, choose a name like contact-form-label instead. Naming anything based on where it is located is tricky but basically top-bar should probably be changed to header and left-column should probably be changed to sidebar or sub or secondary. –  Jason Holland Jul 18 '12 at 13:57
Related article on semantics –  Ryan Kinal Jul 18 '12 at 14:12

3 Answers 3

up vote 8 down vote accepted

Yes. Definitely valid advice. CSS classes, for the most part, should not be tied directly to what they look like. Tie them, instead, to what they mean.

If you're using .blue to provide emphasis, and your site design changes so that you no longer want your emphasis to be blue, then you have a disconnect between the display of the element, and the class name.

If, instead, you used .emphasize, you could change the color in the CSS, and the HTML attribute would still be meaningful. You get the change without having to touch the HTML (or, in this case, you could style the em tag, and get even better semantics in the HTML).

In addition, it makes your CSS more readable. When you're changing .blue, it's not obvious what elements on your page you're changing. But if you're changing .emphasize or .pull-quote, you can immediately tell.

There are instances when non-semantic class names are unavoidable, but this is mostly when creating generic layout. Things like column or column-left or half or third are necessary in grid-based layouts.

So, my opinion is that layout doesn't need to be semantic, and usually won't be. But content should definitely be semantic. Ask yourself what your content is, and make the class name represent that, so it can be used in a meaningful way.

share|improve this answer
However, even with generic elements, you should still take a moment to think about it: grid_half is better than half, for example. –  Izkata Sep 10 '12 at 20:21

Absolutely. You want to start with semantic meaning, then via CSS apply styling to that.

Look at it from a maintenance point of view, long term. Say you have a warning message on your site, and right now you feel that they should be displayed in angry red.

Giving your warning <div> the class "red" may look like a good idea now, but what if research showed that a yellow warning label is more effective later? Now you have to go rename both your class name and adjust your styling.

If, however, you had stuck to a semantic class name ("warning"), all you have to do is tweak the styling attached to that semantic label to adjust what it looks like. Now, when you need to add extra margins, a border, a drop-shadow, you don't need to use additional classes either, you are still styling warnings.

Also, by using semantic names, using your HTML code in different contexts is easier. You can now attach JavaScript code to manipulate all div's with the "warning" class, and it'll be clear to anyone else using your code what you are doing with that code. Your JavaScript code is less prone to breakage, as there is far less chance that the CSS class on the warning <div> is going to change.

share|improve this answer

Names like left, right as well as color names are very possible to be ambiguous.

In our company we're working on a huge web project. There are thousands of css classes, and it is convenient to name the classes based on the component they work with. This helps you and others know where each css class is used. So when a class content is changed we know where exactly to expect possible changes of the look.

There is another potential problem here. When you name the class left and in a couple of days the design changes slightly so that the element with left must go to right, you can't just edit the content of your class. You'll have to rename it, find all references and rename those too. Or you'll have to create a new class, and the old one will gradually become unnecessary trash.

share|improve this answer

Your Answer


