Join the DZone community and get the full member experience.
Join For FreeDeploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.
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:
and HTML
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.
And the HTML:
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.
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
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
Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.
Like This Article? Read More From DZone
Topics:
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}