Structural Naming Convention in CSS

Structural naming convention means that you name you elements for what they do rather than where they are located or how they look. When you assign a class or id for the masthead area of your page, you would then name it banner or masthead rather than top-div. Naming the elements for where they are located or how they look is called presentational naming.

Example 1: Presentational Layout click thumbnail to view larger image

Screenshot Presentation Layout - click to view larger image

Problems the Presentational Layout presents:

  1. What happens if you move things around? Is the accuracy of your markup affected?
  2. The div names don’t accurately describe what the elements are. Either what they are for and what they do as part of the overall document.

Example 2: Structural Layout click thumbnail to view larger image

By changing the names of the elements to #header, #site-navigation, #main-content, and #footer, the names NOW describe the purpose and the structure of those particular elements within in the document.


  1. BEFORE choosing the id or class for an element, ask yourself what is the element for?
  2. AVOID using names that rely on the location or visual look of the element. What happens if you want to change that class red-link to blue-link?
  3. Use names that are intuitive and mean something to you.

You can read  CSS Tip #2: Structural Naming Convention in CSS by Jacob Gube in its entirety. Make sure you check the Related Articles listed at the end.

Templates that are offered on Genealogy Web Creations and Expression Web Tutorials use the structural naming convention.

Speak Your Mind