Write Modern CSS - Use Class

Lately the CSS community is focused on the new CSS3 tricks and more essential topics like CSS Layouts are left in the dark. Many things have changed but we still using ID's for direct styling. Meaning we have #header, #footer, #navigation, #main … and we apply styling on that id.

What is wrong with this code and approach? There is nothing wrong with the HTML; it is perfectly semantic and logical. The problem is the CSS.

You all have seen CSS like this:

#main { margin:0 auto; width:900px;}

#header{
float:left;
width:900px;
}

#footer{
float:left;
width:900px;
}

#navigation{
float:left;
 width:150px;
}

#sidebar{
float:left;
width:150px;
}

#content{
float:left;
 width:600px;
}

and HTML

<div id="main">

<div id="header">#header</div>

<div id="navigation">#navigation</div>

<div id="content">#content</div>

<div id="sidebar">#sidebar</div>

<div id="footer">#footer</div>

</div>

Example ID

We are directly using the ID for layout. But we forget that ID can be used once and only once.

That is not flexible!!

For every building block (DIV) we must write different ID. If we have 1000 blocks we must write 1000 different ID.

Why don't we start using class, write it once use it multiple times.

Here is the second example with the same HTML but different CSS. Note that this model supports semantic coding. We are using ID to give logical and semantic areas to HTML bit we are using the class for all the styling.

#main { margin:0 auto; width:900px;}

.w150,.w600,.w900 {float:left;}

.w900 {width:900px;}
.w600 {width:600px;}
.w150 {width:150px;}

And the HTML:

<div id="main">

<div id="header" class="w900"> </div>

<div id="navigation" class="w150"> </div>

<div id="content" class="w600"> </div>

<div id="sidebar" class="w150"> </div>

<div id="footer" class="w900"> </div>

</div>

Example with class

But this system really shines when we have one block that repeats many times.

Let's build Photo Gallery Example.

Image Gallery using ID's

Image Gallery using class

View the source code of the last two examples.

And we have 2 lines of code for the layout using class v.s 9 lines of CSS using id's.

I think that is more then obvious that with the class we can write less code.

Why don't we try to extend the second example and build extend layout system.

/* w for width */

.w150, .w300, .w450, .w600, .w750, .w900 {float:left;}

.w150{width:150px}
.w300{width:300px}
.w450{width:450px}
.w600{width:600px}
.w750{width:750px}
.w900{width:900px}

.clear{clear:both;}

And the we have our own CSS Framework.



The Example CSS Framework.

Someone will ask: What about the speed of the execution.

According to this tests class perform better than ID on most modern browsers. Unfortunately I'm getting inconsistent results for every measure. So I will be happy is someone can confirm my statement.

Final thoughts:

The point of this article is that the class is more flexible than id. Effectively you can write less code with class-es. You can always use semantical HTML and ID with the combination with class if you like.

And the final thing there is no wright or wrong coding method. The wright method is the one that works for you. This is the method that I prefer.


Your comments and thoughts will be appreciated.

From http://www.vcarrer.com/2011/05/write-modern-css-use-class.html