Give your elements meaningful semantic names

Creating meaningful semantic HTML identifiers is something I always aim to do in my markup. I also thought this was something that other designers did as well. This past week I’ve found out just how wrong I was in that assumption.

I’ve been working on implementing some markup created by another individual, and most of the class names and identifiers describe the location of the elements instead of what they are, or what their purpose is. The markup is littered with class names such as .span40, .left, .middle, .right_col.right_text, and so on. And while these classnames are semantic in that they convey some meaning. Its my opinion that they convey the wrong meaning.

Why div.align_left is wrong

The primary reason that identifiers describing the appearance are wrong, is that they very quickly become wrong and confusing. Say your client changes the margins (not that clients ever change things) and all of a sudden .margin5px really stops making sense. And you start having to remember that .margin5px actually has 7px of top and bottom margin and 4px of left and right margin. Compound that across the several handfuls of selectors that most sites use and you have a bottle of pain waiting to be opened. Another reason for avoiding these identifiers is that if you change the design you are then plagued by the task of changing all the .margin5px to .margin7px.

Giving good functional names

Much as you wouldn’t name your children .short.red-hair (at least I hope you wouldn’t) you should be giving your elements meaningful descriptive names. And by descriptive, I mean descriptive of their function, purpose or what they represent. So while .general_container.no_margins may work at this very point in time, .menu.secondary will always make sense. A few more examples would be .warning, .important, .messages .inbox, #footer .site-links.

While I realize that functionally descriptive names are not always a possibility, as you can quickly run out of good names. However, it is always possible to stay away from names that directly reference the properties being applied. I feel these are the worst offenders in the non-semantic naming game. So next time you catch yourself typing out one, back that caret up and pick something better, more abstract and less tied to the properties being applied.

Comments

I agree. I don’t know how much attention I’ve been giving the concept looking over my career, though I am getting better. One other thing I’ve got in the habit of for a few reasons is preceding semantic names with a prefix no one else tends to use to avoid naming conflicts (i.e. .lo-site-links, #xyz-header) when combining my code with some other open source project. i.e. wordpress, drupal, or magento, etc. Semantic naming makes sense, but the biggest problem I see in applying it is the ambiguous naming and naming conflicts (thus the prefix). I guess this probably breaks the rules, though, huh? maybe not, though… works for me ;)

Agree with Mark, and I am trying to follow these concepts, but in my practice I haven’t so big changes, that require css changes. Once the it is done, then in 99% of the cases its over and never changed :)

Jon: I don’t think prefixing is a bad idea at all, especially considering the volume of HTML that some CMS’ can generate. Its a very reasonable solution to a tricky problem.

mark story on 1/9/09

writing semantic code is important but sometimes is hard to achieve. Especially when you work on large projects and you’re moving things around for so many times left become right and vice-versa. Still I like to use .left and .right or .floatLeft, .floatRight, .hr – they are so is easy to remember so I use them anytime I have to float boxes. E.g.

Vic: In the time that has passed since I wrote this article, I have been working on a few larger projects. Having classes like floatLeft and even classnames for grid column widths becomes really powerful for prototyping and keeping CSS manageable.

While I still think you should try to keep use good classnames, there are exceptions. As you pointed out float rules, and I think grid/layout rules, and possibly classnames for common decorations fall into this category. Having border-radius with all the prefixes defined 10 times in your CSS makes for a more difficult to maintain code base than having a .rounded class.

Recent Artwork

Links

Mark is a designer and web-developer, working with standards compliant HTML and CSS. He has been building websites since 2000. Currently he is employed at Freshbooks as a developer, and actively contributes to open source projects specifically CakePHP. He uses this site as a place to share what he has learned and made.