One issue, that Im sure everyone encounters is how to correctly layout your website with CSS. Should I call the top part of my site, #header or #header-top, or #top-of-the-page-header. There are so many choices, but the real aim here is to keep your naming structure semantic by creating structure with re-usable names. For example, CSS Zen Garden is a great example of how to structure your XHTML so it can be re-used with many different designs. Instead of creating ids or classes like, lefttop-red-text – its much better to create one that actually describes to function and structure of that element like #related-news or #top-stories. More descriptive classes could be named #important-text or #error-text. Its always for good measure to use the common h1,h2,h3, etc. tags to describe level heading and just change the style of them.
- Never use layout descriptives in class names. Rather, use functional names for your classes, avoid words that describe how they look or where they are located on the page. #mainnavigation is better than #leftnavigation. Use #.copyright and #.pullquote instead of #smallgrey or #indentitalic. Name classes/IDs based on function, not appearance. If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense.
- Reuse the same class name in different places, this is the beauty of stylesheets. One stylesheet for all!
- Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID. Some other online resources:
What\’s in a name?
Good Class Names
Category CSS/Web Standards, Web
You can follow any responses to this entry through the RSS 2.0 feed.
No Responses to “CSS Naming Standards”