DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Write modern CSS - Use Class

Write modern CSS - Use Class

Vladimir Carrer user avatar by
Vladimir Carrer
·
Nov. 17, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
5.37K Views

Join the DZone community and get the full member experience.

Join For Free
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;}

view raw

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
CSS

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • 12 Kick-Ass Software Prototyping and Mockup Tools
  • How to Properly Format SQL Code
  • Troubleshooting Memory Leaks With Heap Profilers
  • Datafaker: An Alternative to Using Production Data

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo