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:
- 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.
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.