Inspired by Chris Coyier article, What Makes For a Semantic Class Name?, @ css-tricks.com.
<div class="column_1"></div> |
Unsemantic. Unless used in Grid-based system.
<div class="footer"></div> |
Semantic. Yet consider using <footer> tag (& other semmantic HTML5 elements)
<div class="largeText"></div> |
Un-semantic. This is specifying. Why should the text be larger? To “stand-out” or to “highlight” – consider using <mark> tag?
<div class="priority-2"></div> |
Semantic. It’s like the idea of using <h1 />, <h2 />,…, <h6 />
<div class="clearfix"></div> |
Unsemantic yet Acceptable in this case. Only name such similar un-semantic classes if only they’re pre-defined such as ir (image-replacement), left (float left) & some theme colors, etc.
<div class="copyright"></div> |
Semantic. Some other class named of similar use are: “tweets”, “pagination”, “admin-nav”, “sidebar”.
<p class="introp"></p> |
Unsemantic. Classitis. It can be selected by CSS: .intro p:first-child
<div class="left"></div> |
Unsemantic. Perhaps in the future, you may wanna this element on the right instead.
<div class="success"></div> |
Semantic. It usually works in conjunction with other class to best describe the element content (or status of content): class=”success message”, “success feedback”, “fail message”, etc. Don’t use 1 class in such cases like “redBigError” or “renderError”. They are not reusable.
<a class="link" href="#"></a> |
Unsemantic. Classitis. It should be more specific in this case like: book-link, button, etc.