Using semantic CSS naming
The whole reason of CSS and HTML is separating content from presentation. But this only makes sense if the id and classnames you use describe their purpose and not how they are displayed. I'll try to illustrate this with few examples of bad CSS style naming:
.coolblue{...}: This was the style ment to display the list of links with. Unfortunately, the site was redesigned, and suddenly.coolbluewas now actually... light grey.#left-nav {...}: Again, in the next design, this block of navigation links became a horizontal tab-like strip just above the title. Confusing, isn't it?- To make it even more confusing,
#top-actions{..}was moved to... a inline block in a related content column on the right side of the main content.
So in fact CSS names should never have any presentational annotation.
Meaningful section names
Most Web pages follow the same patterns: They have a section for the identity of the site or application and a logo. Then there's the content part, which is usually somewhere central. The navigation is a block of links situated to the left or right of the content. Navigation can also be rendered as a horizontal strip somewhere in the top part of the page. But remember that with CSS, the location of these elements can change in future redesigns.
Header, left, right and footer? These names indicate presentation. I can easily put the header on the left, the left on top and the footer as topmost element on the page. In the sites I build, I find it better to use #identity{...}, #content{...}, #nav{...} and #legal{...}. Finding the name for the bottom part was the most tricky one. But since this area of the page was in most cases filled with copyrights, disclaimers and policies, I decided that #legal{...} was a fair choice.
All purpose names
I often put the entire content of the page in a <div> instead of directly under the <body>. Many developers do this. But how will I name it? I've seen "container" a lot, but that reminds me too much of ships. I choose "canvas" since I like to see my work as "painting with CSS".
For styled boxes as the Categories and Monthly archives links, I couldn't find anything better than a <div class="box">. If anyone has a better idea, please let me know. Look at the source of this page. It's all there.
Comments
To add a comment, log in or register as new user. It's free and safe.