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
·
Jun. 02, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
2.66K 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 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


CSS

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • An Overview of Key Components of a Data Pipeline
  • Pattern Matching for Switch
  • How to Utilize Python Machine Learning Models
  • Take Control of Your Application Security

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