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.