Naming convention in CSS coding is an "hot" discussion topic. In this post I want to illustrate some suggests and guidelines to use a semantic approach instead of a structural approach in naming CSS classes, analyzing the essential elements of a popular 3 column layout.
I also added a list of some useful articles about naming convention and a list of CSS frameworks which can help you to develop CSS code quickly and easier.
Semantic vs structural approach in naming classes
In general, a semantic approach defines classes names considering the "meaning" a certain element has on your page, independently from its "position" or specific property (structural approach). Some examples of a structural approach are: left-bar, red-text, small-title...Take a look at the following example:
...and image now to change the position of the elements on your page. If you used a structural approach (1) you have to change all classes names because sections, in the new configuration (3), are inverted: right-bar is now "left-bar", and left-content is "right-content". Using a semantic approach you don't have this problem (4):
In other words using a semantic approach, you can think to modify your site's layout only redefining some properties of CSS elements without changing consequently classes names.
Some guidelines...
Before to start, I want to suggest two simple guidelines for developing a better CSS code:1. Use lowercase characters to define your class and use "-" or uppercase letters to separate multiple-words classes (ex. "main-content", or "mainContent).
2. Optimize CSS code creating only the main classes and reusing HTML standard tags for child elements (h1, h2, p, ul, li, blockquote,...). For example, don't use this approach:
<div class="main">
<div class="main-title">...</div>
<div class="main-paragraph">...</div>
</div><div class="main-paragraph">...</div>
...but use this:
<div class="main">
<h1>...</h1>
<p>...</p>
</div><p>...</p>
Example of semantic approach using a three columns layout
Take a look at this simplyfied example which illustrates how to use a semantic approach to design a classic three columns layout:
Using a semantic approach CSS code could be something like this:
#container{...}
/*---- Top section ----*/
/*---- Top section ----*/
#header{...}
#navbar{...}
/*---- Main ----*/
#menu{...}
#main{...}
#sidebar{...}
/*---- Footer ----*/
#footer{...}
#navbar{...}
/*---- Main ----*/
#menu{...}
#main{...}
#sidebar{...}
/*---- Footer ----*/
#footer{...}
1. Container
"#container" is the section which "wrap" all elements of your page in a specific position within the browser's window. For this section you can also use these names: "wrapper", "wrap", "page".
2. Header
"#header" is the website's top section. In general, it includes site's logo and other elements. For this section you can also use these names: "top", "logo", "page-header" (or pageHeader).
3. Navbar
"#navbar" identifies the horizontal navigation bar, a classic elements for every web site. For this section you can also use these names: "nav", "navigation", "nav-wrapper".
4. Menu
"#menu" section contains general links and menu. For this section you can also use this names: "sub-nav ", "links".
5. Main
"#main" is the site's main section; if you have a blog it's the section which contains your posts. For this section you can also use these names: "content", "main-content" (or "mainContent"),
6. Sidebar
"#sidebar" section can contain secondary content, for example recent entries, some info about the site, ads elements... For this section you can also use these names: "sub-nav", "side-panel", "secondary-content".
7. Footer
"#footer" contains additional information about the website. For this section you can also use the name: "copyright".
If you have some suggest about other "semantic" names about these elements, please add a comment!
CSS naming convention articles
If you want to deepen this topic, take a look at the following articles:1. More on developing naming conventions, Microformats and HTML5
2. Standardizing CSS class and id names
3. User interfaces and CSS Naming convention
4. Structural naming
5. Smart CSS Ain’t Always Sexy CSS
6. Semantic coding
7. Semantic naming conventions for HTML and CSS
8. What's in a name (pt1)
9. What's in a name (pt2)
10. Most popular naming conventions
11. Semantic and Structural aspects of HTML
CSS Framework
1. Blueprint CSS2. 960 Grid System
3. Yahoo! UI Grids
4. Content with Style CSS Framework
5. Boilerplate
6. Typogridphy
7. Schema
8. BlueTrip
9. Elastic
10. Logic CSS
Related content
Optimize your CSS files to improve code readabilityWrite a well structured CSS file without becoming crazy
I am 
Excellent post. Simple and clear.
useful post.
Great post, ones like these are always interesting and useful to read. Its a great approach. Keeping yourself organized.
Thanks for this.
Amazingly useful post on semantic coding! Thanks!
I would add to the list of CSS Framework "Yet Another Multicolumn Layout" (YAML). Thank you!
Thanks for your post! :) This post exactly what I use to say with my friends, but they doubted that. Now I know where to show them. :)
Good post, but aren't #top, #header, #sidebar and #footer somwhat structural names as well?
You could take it a step further and use names as #branding, #sub-content and #site-info.
Just my 2c
Absolutely amazing article. All of my sites from now on will use these ideas. Thanks for this!
I know I am being picky but you aren't being particularly semantic when you call a call sidebar.
Perhaps a better name would be news or information - depending on the actual content that is going in there.
I'm inclined to use header, col1, col2, col3 etc. & footer for my layout. I then shift content around inside the structural divs using semantic names like topNav, mainContent, subscriptionForm, etc.
in last layout section no. 4 MENU is not necassaryif i not place any menu here. it can bi another left side bar. then what name should be used?
Nice article, and cheers for the link to typogridphy!
About the looks of words.. this is my own convention I use:
html: this-has-a-dash
php: this_has_an_underscore
js: thisIsCamelCase
Why do you prefer - over _?
I recently decided to be more strict about my naming conventions. I have not settled on how to name my css classes thou. I was leaning more towards under_score format because that's how I name my variables.
I totally agree with you, naming conventions are important, specially when working in a team. Good job!
http://devedge-temp.mozilla.org/viewsource/2001/css-underscores/ is an old link that explains why underscores are bad for CSS.
I'd go as far as suggesting that hyphens and CamelCase are also bad.
my approach is to just stick to lowercase and then the possibility of a typo making a hash of your site is much reduced.
using div id="branding" and div id="maincontent" means never having to worry about was it hyphenated or camelcase.
Another CSS Framework Emastic
On the class convention side.. from a programming point of view.. classes are more generic than id's (objects). A convention.. sometimes a rule (Ruby).. is that a class name is written with an uppercase letter, furthermore I think it makes sense to name it in an plural fashion because classes can act on more html elements.
exp:
.Shout-outs
.Columns
class="Sexy-ladies"
class="Favourit-people"
Thought I'd chime in to concur with some of the earlier commenters -- naming content "sidebar" essentially defeats the purpose of avoiding non-semantic markup names. What if you want to move it to the top or bottom or elsewhere? Then it makes just as little sense as swapping "left" and "right".
The point of semantic naming is to approach the content independently of any display medium. So whether I print out your site or view it on a mobile device, it is not tied to any specific layout representation.
"#sidebar" should be "#sub_content" or "#secondary" or something. Likewise "#masthead" or "#branding" instead of "#header"...
Good and Simple. Thank you for this article.
Good Post, I was mixing both semantic and structural class name. Also using lot of unnecessary divs to style the site.
I have tried blueprint for couple of projects, grid system and basic typography comes with that. Again these frameworks generates "classes" like span-22, push-10 etc.
www.noussh.com
nice advice, short and effective.
Nice and simple idea for naming convention. Ralph
I use branding instead of header as someone else mentioned befor in the thread and site_info for the lower part of the site..
just me 2 cent
:-)
www.andreapicchi.it
Hi Antonio,
other question:
Witch code highlighter or tool do you use to post your code snippets on blogger?
Thanks very useful advice. And all the comments add to its value.
I would suggest the 'sidebar' is still a presentational description, i.e. denoting a container is on the side of something. The convention I use is to call elements with less priority "sub". This container should be called "subnav" or "subnavigation" I think.
I will be expert at CSS coding very soon. Thank you for this great help.
Nice... It is good that I found u on twitter.com :)