CSS coding: semantic approach in naming convention

Naming convention in CSS coding is an "hot" discussion topic. In this post I want to illustrate some suggests and guidelines to use a semantic approach instead of a structural approach in naming CSS classes, analyzing the essential elements of a popular 3 column layout.

I also added a list of some useful articles about naming convention and a list of CSS frameworks which can help you to develop CSS code quickly and easier.

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>

</div>

...but use this:

<div class="main">

<h1>...</h1>
<p>...</p>

</div>

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:

#container{...}
/*---- Top section ----*/

#header{...}
#navbar{...}

/*---- Main ----*/
#menu{...}
#main{...}
#sidebar{...}

/*---- Footer ----*/
#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".

If you have some suggest about other "semantic" names about these elements, please add a comment!

CSS naming convention articles

If you want to deepen this topic, take a look at the following articles:

1. More on developing naming conventions, Microformats and HTML5
2. Standardizing CSS class and id names
3. User interfaces and CSS Naming convention
4. Structural naming
5. Smart CSS Ain’t Always Sexy CSS
6. Semantic coding
7. Semantic naming conventions for HTML and CSS
8. What's in a name (pt1)
9. What's in a name (pt2)
10. Most popular naming conventions
11. Semantic and Structural aspects of HTML

CSS Framework

1. Blueprint CSS
2. 960 Grid System
3. Yahoo! UI Grids
4. Content with Style CSS Framework
5. Boilerplate
6. Typogridphy
7. Schema
8. BlueTrip
9. Elastic
10. Logic CSS

Related content

Optimize your CSS files to improve code readability
Write a well structured CSS file without becoming crazy