HTML5 Zone is brought to you in partnership with:

Vladimir is a DZone MVB and is not an employee of DZone and has posted 21 posts at DZone. You can read more from them at their website. View Full User Profile

Write modern CSS - Use Class

11.17.2011
| 4476 views |
  • submit to reddit
Lately the CSS community is focused on the new CSS3 tricks and more essential topics like CSS Layouts are left in the dark.

Many thing 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 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 IDs. If we have 1000 blocks we must write 1000 different IDs.

Why don't we start using classes, 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 but 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 a 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 ids.

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

Why don't we try to extend the second example and build an extended 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 these tests classes perform better than ID on most modern browsers. Unfortunately I'm getting inconsistent results for every measure. So I will be happy if 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 classes. You can always use semantic HTML and ID with the combination of class if you like.

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


Your comments and thoughts will be appreciated.

Source:  http://www.vcarrer.com/2011/05/write-modern-css-use-class.html
Published at DZone with permission of Vladimir Carrer, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Timothy Mcclanahan replied on Thu, 2011/11/17 - 2:30pm

I would suggest that you still use ids, just do your actual styling with classes. Why use ids but not style with them? Automated testing! With automated testing, you can check for the presence of specific things with ids much more easily. Help your QAs help you.

Bob Jones replied on Thu, 2011/11/17 - 3:11pm

Id's are faster in JavaScript than classes; at least for browsers that have no native js support for returning DOM nodes via class descriptors. E.g. getElementById("x")

Vladimir Carrer replied on Fri, 2011/11/18 - 1:56am

 

One important note. All the class names I used in this article are not semantic. Also they have some downsides when it comes to name updates.

 

My point is very simple use .class (with your class names) for the repeating parts, use ID's for mapping your HTML. 

Other thing is no longer true that ID are significantly faster then Classes. http://scope.bitbucket.org/tests/selector-matching-performance/index.html

 

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.