CSS coding in semantic approach

 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.

Some guidelines…

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:

<div class=“main”>

<div class=“main-title”></div>
<div class=“main-paragraph”></div>


…but use this:

<div class=“main”>




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 —-*/

1. Container
#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“.

2. Header
“#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).

3. Navbar
#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”.

4. Menu
#menu” section contains general links and menu. For this section you can also use this names: “sub-nav “, “links“.

5. Main
#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”),

6. Sidebar
“#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“.

7. Footer
“#footer” contains additional information about the website. For this section you can also use the name: “copyright“.

You may also like...