Monday, April 30, 2012

CSS Naming 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

  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

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

Then I looked at HTML new semantic tags

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

No comments:

Post a Comment