This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, November 16, 2008

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

blog comments powered by Disqus
Ryu said...

Excellent post. Simple and clear.

enver said...

useful post.

Coughlin said...

Great post, ones like these are always interesting and useful to read. Its a great approach. Keeping yourself organized.

Thanks for this.

jerang said...

Amazingly useful post on semantic coding! Thanks!

Ascetic said...

I would add to the list of CSS Framework "Yet Another Multicolumn Layout" (YAML). Thank you!

Duc Ban said...

Thanks for your post! :) This post exactly what I use to say with my friends, but they doubted that. Now I know where to show them. :)

Joost said...

Good post, but aren't #top, #header, #sidebar and #footer somwhat structural names as well?

You could take it a step further and use names as #branding, #sub-content and #site-info.

Just my 2c

Bennie Mosher said...

Absolutely amazing article. All of my sites from now on will use these ideas. Thanks for this!

lostsock said...

I know I am being picky but you aren't being particularly semantic when you call a call sidebar.

Perhaps a better name would be news or information - depending on the actual content that is going in there.

Ross said...

I'm inclined to use header, col1, col2, col3 etc. & footer for my layout. I then shift content around inside the structural divs using semantic names like topNav, mainContent, subscriptionForm, etc.

Jitendra Vyas said...

in last layout section no. 4 MENU is not necassaryif i not place any menu here. it can bi another left side bar. then what name should be used?

Harry Roberts said...

Nice article, and cheers for the link to typogridphy!

Monkeytail said...

About the looks of words.. this is my own convention I use:

html: this-has-a-dash
php: this_has_an_underscore
js: thisIsCamelCase

louis w said...

Why do you prefer - over _?

I recently decided to be more strict about my naming conventions. I have not settled on how to name my css classes thou. I was leaning more towards under_score format because that's how I name my variables.

Tom said...

I totally agree with you, naming conventions are important, specially when working in a team. Good job!

Tony said...

http://devedge-temp.mozilla.org/viewsource/2001/css-underscores/ is an old link that explains why underscores are bad for CSS.

I'd go as far as suggesting that hyphens and CamelCase are also bad.

my approach is to just stick to lowercase and then the possibility of a typo making a hash of your site is much reduced.

using div id="branding" and div id="maincontent" means never having to worry about was it hyphenated or camelcase.

Pippo said...

Another CSS Framework Emastic

Monkeytail said...

On the class convention side.. from a programming point of view.. classes are more generic than id's (objects). A convention.. sometimes a rule (Ruby).. is that a class name is written with an uppercase letter, furthermore I think it makes sense to name it in an plural fashion because classes can act on more html elements.

exp:

.Shout-outs
.Columns
class="Sexy-ladies"
class="Favourit-people"

nathandh said...

Thought I'd chime in to concur with some of the earlier commenters -- naming content "sidebar" essentially defeats the purpose of avoiding non-semantic markup names. What if you want to move it to the top or bottom or elsewhere? Then it makes just as little sense as swapping "left" and "right".

The point of semantic naming is to approach the content independently of any display medium. So whether I print out your site or view it on a mobile device, it is not tied to any specific layout representation.

"#sidebar" should be "#sub_content" or "#secondary" or something. Likewise "#masthead" or "#branding" instead of "#header"...

Murali said...

Good and Simple. Thank you for this article.

noussh said...

Good Post, I was mixing both semantic and structural class name. Also using lot of unnecessary divs to style the site.

I have tried blueprint for couple of projects, grid system and basic typography comes with that. Again these frameworks generates "classes" like span-22, push-10 etc.

www.noussh.com

Khaled said...

nice advice, short and effective.

Ralph said...

Nice and simple idea for naming convention. Ralph

Andrea said...

I use branding instead of header as someone else mentioned befor in the thread and site_info for the lower part of the site..

just me 2 cent
:-)

www.andreapicchi.it

Hanspeter77 said...

Hi Antonio,

other question:
Witch code highlighter or tool do you use to post your code snippets on blogger?

Anonymous said...

Thanks very useful advice. And all the comments add to its value.

Anonymous said...

I would suggest the 'sidebar' is still a presentational description, i.e. denoting a container is on the side of something. The convention I use is to call elements with less priority "sub". This container should be called "subnav" or "subnavigation" I think.

Suparna said...

I will be expert at CSS coding very soon. Thank you for this great help.

Sorin said...

Nice... It is good that I found u on twitter.com :)

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News