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 NamesCSS Naming StandardsCategory CSS/Web Standards, Web
You can follow any responses to this entry through the RSS 2.0 feed.
No Responses to “Beautiful Cascading Stylesheets”