CSS Naming Guidelines

Guidelines

• Name CSS class in a semantic approach
• Use lowercase characters to define your class and use "-" or camelCase (ex. "main-content", or "mainContent) to separate multiple words
• Optimize CSS code creating only the main classes and reusing HTML standard tags for child elements (h1, h2, p, ul, li, ...)
• When assigning a class or id, ask yourself “What is this element for?"
• Avoid using names that rely on locational or visual aspects of the particular element
• Use names that are intuitive to you
• Use a proper/good CSS framework
• Reference top web sites or big companies

Typical web page structure

Examples

1. container/wrapper/page/main/box
   
2. header
3. navbar/nav
4. menu/sidebar/subnav/secondary-content
5. main/content/main-content
6. sidebar/sidepanel/subnav
7. footer

References:
http://woork.blogspot.com/2008/11/css-coding-semantic-approach-in-naming.html
http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css
http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html

Updates: (5/9/2012)
Today I joined a webcast from O'Reilly about jquery Mobile, the demo showed some very straightforward html codes with data-role attribute.jQuery mobile also uses semantic names for these data roles, for instance
data-role="header"
data-role="footer"
data-role="page"
data-role="content"
data-role="navbar"
data-role="content"

Then I looked at HTML new semantic tags
<article>
<aside>
<header>
<footer>
<nav>
<section>

With these trends (standards), we should start to define page structure and name CSS class in a semantic way.