Structural Naming Convention in CSS

Found this interesting and informative post on the Six Revisions blog which is part of his CSS Tips series.

Structural naming convention means that you name elements by describing what they are, rather than where they are or how the look. You do this by assigning a class (dot) or id (# hash mark) to the element.  Presentational naming describes the location and/or appearance of web page elements.

The post discusses the concept of structural naming conventions, the benefits of using this convention, and shares some guidelines on practical applications of structural naming conventions.

First he gives an example (1) of a presentational naming layout and then discusses what is wrong with this approach. The presentational naming layout inlcudes:

  • #top-div
  • #left-col
  • #right-col
  • #bottom-div

The next example (2) uses a structural naming convention and includes the following:

  • #header
  • #main-content
  • #secondary-content
  • #footer

Example 3 really uses structural naming conventions which includes:

  • #branding
  • #main-content
  • #secondary-content
  • #site-info

The last example,using  fully-structural in naming conventions,  describes what the div’s and other elements are for, instead of where they are or how they look.

The second part of the post offers a few guidelines which include:

  1. When assigning a class or id, ask yourself “What is this element for?”
  2. Avoid using names that rely on locational or visual aspects of the particular element.
  3. Use names that are intuitive to you.

He also includes some Further reading resources on this same topic:

You can read  CSS Tip #2: Structural Naming Convention in CSS in its entirety.

Trackbacks

  1. […] This post was mentioned on Twitter by Pat Geary, Rod Falanga. Rod Falanga said: RT @patgeary: Structural Naming Convention in CSS: Found this interesting and informative post on the Six Revisions blog which i… http://bit.ly/9S3dr9 […]

Speak Your Mind

*