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

0 thoughts on “CSS Naming Standards”

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…

eCommerce

How to implement Bronto Email JavaScript Conversion tracking in Google Tag Manager

This tutorial will show you how to setup Bronto Advanced JavaScript Conversion tracking using Google Tag Manager. Bronto Advanced JavaScript tracking gives you more visibility to all of the products that customers are purchasing, then Read more…