The Semantic Web
With the rise of web standards we have seen the rise of the semantic web. This applies to the HTML elements selected as well as the class names chosen for the HTML. When choosing semantic elements and class names you want to pick a name considering the function or meaning of the element as it is on your page, not the position or style of the element.
The Meaning
What exactly am I talking about “meaning” or “function”? This means that when picking a name you want to pick one regardless of where it is, only what it contains or what you’re using it for.
example: Imagine we have some markup that represents a search result
THE BAD WAY
<div class="search-result">
<div class="search-result-large-header"><a href="">My Search Result</a></div>
<div class="search-result-gray-description">This is the best search result</div>
<div class="bottom-search-result-info"><a href="">1 comment</a> <a href="">12 views</a></div>
</div>There is a lot of things wrong with this. To name a few, there are too many unnecessary DIV’s; The class names have style and position specific properties; Since this is a search result, multiples of these makes me want to pass out.
THE SEMANTIC WAY
<div class="search-result">
<h3><a href="">My Search Result</a></h3>
<p>This is the best search result</p>
<div class="meta"><a href="">1 comment</a> <a href="">12 views</a></div>
</div>using the semantic way, I don’t need as many divs and when I do use a div I try to pick a name that describes what I’m putting in the tag. I’m calling it “meta” because that info is the meta data for that search result. It has nothing to do with the bottom, and it doesn’t need “search-result” in the name because it is a child of search-result anyways.
I also selected h3 and p elements because an h3 refers to a heading, which the title of the search result is certainly a heading, and p, because this is a paragraph of text which describes the search result.
You may ask, “What’s the big deal? It’s all gonna render the same in the browser anyways?” The benefits for semantic code translate into faster development time, javascript traversal becomes easier and it makes me happy. :)
Some more bad names that I have witnessed: .padding5px, .topBorderGreen, .redErrorText. What happens if you want a padding of 4px, or suddenly the border becomes blue, or if the error text becomes yellow. Then you’ll need to go back through all your html and re-name classes. May I suggest names like .content, .important, or .error.