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?
3
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.
1
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.
3
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.