4

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?

  • 1
    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
  • 1
    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. – programmer Jul 18 '12 at 13:57
  • Related article on semantics – Ryan Kinal Jul 18 '12 at 14:12
10

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
    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
2

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.

  • What about Materialize which uses color names and shades as class names? – Emile Bergeron Feb 17 '17 at 16:18
  • 1
    @EmileBergeron: I have the impression those are meant to be used in other CSS classes more than being applied directly. The same drawbacks apply there; if you want to tweak your site design, do you really want to go through all your HTML templates and replace teal with cyan? – Martijn Pieters Feb 17 '17 at 16:22
  • 1
    I'm definitely with you on this, but I'm trying to grasp why Materialize is pushing context-based class names? And I'm starting to see comments on SO around this practice for any CSS... – Emile Bergeron Feb 17 '17 at 16:31
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.