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