A semantic approach instead of a structural approach in naming CSS classes, analyzing the essential elements of a popular 3 column layout.
Semantic vs structural approach in naming classes
In general, a semantic approach defines classes names considering the “meaning” a certain element has on your page, independently from its “position” or specific property (structural approach). Some examples of a structural approach are: left-bar, red-text, small-title…
Take a look at the following example:
…and image now to change the position of the elements on your page. If you used a structural approach (1) you have to change all classes names because sections, in the new configuration (3), are inverted: right-bar is now “left-bar”, and left-content is “right-content”. Using a semantic approach you don’t have this problem (4):
In other words using a semantic approach, you can think to modify your site’s layout only redefining some properties of CSS elements without changing consequently classes names.
Before to start, I want to suggest two simple guidelines for developing a better CSS code:
1. Use lowercase characters to define your class and use “-” or uppercase letters to separate multiple-words classes (ex. “main-content“, or “mainContent).
2. Optimize CSS code creating only the main classes and reusing HTML standard tags for child elements (h1, h2, p, ul, li, blockquote,…). For example, don’t use this approach:
…but use this:
Example of semantic approach using a three columns layout
Take a look at this simplyfied example which illustrates how to use a semantic approach to design a classic three columns layout:
Using a semantic approach CSS code could be something like this:
/*—- Top section —-*/
/*—- Main —-*/
/*—- Footer —-*/
“#container” is the section which “wrap” all elements of your page in a specific position within the browser’s window. For this section you can also use these names: “wrapper“, “wrap“, “page“.
“#header” is the website’s top section. In general, it includes site’s logo and other elements. For this section you can also use these names: “top“, “logo“, “page-header” (or pageHeader).
“#navbar” identifies the horizontal navigation bar, a classic elements for every web site. For this section you can also use these names: “nav”, “navigation”, “nav-wrapper”.
“#menu” section contains general links and menu. For this section you can also use this names: “sub-nav “, “links“.
“#main” is the site’s main section; if you have a blog it’s the section which contains your posts. For this section you can also use these names: “content“, “main-content” (or “mainContent”),
“#sidebar” section can contain secondary content, for example recent entries, some info about the site, ads elements… For this section you can also use these names: “sub-nav“, “side-panel“, “secondary-content“.
“#footer” contains additional information about the website. For this section you can also use the name: “copyright“.