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
Problems the Presentational Layout presents:
- What happens if you move things around? Is the accuracy of your markup affected?
- 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.
- BEFORE choosing the id or class for an element, ask yourself what is the element for?
- 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?
- 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.