{Carrer web log}


Blog about web design & development

CSS Specificity Coding Method

Monday, October 12, 2009 { 3 Comments }

Few days ago I was reading the interesting Four Bubbles Model that inspired to think some alternative ways to organize CSS code.

One of the first thing you learn is the lower is better or:

.name {color:blue;}
.name {color:red;} /* the winner */

The class .name with red color overwrites .name with blue color.
So our logical assumption is the lower the objects are in the CSS they are more specific.

In the age before firebug I was spending a lot of time determining why "the color is red" and what part of CSS determines why should be red.

So if I order my CSS by their Specificity the search should be very easy, I should start from the bottom to the top. If you don’t understand how CSS Specificity here is CSS Specificity Cheat Sheet and some useful links.

Example:

Elements
p{}
a{}
ul li {}

Classes
.name{}
div.name{}

ID’s
#header{}
#sidebar{}

#footer{}
#sidebar li {}

Maybe most popular method now of CSS organization is thematic approach or we have something like:

There is nothing wrong with this model and we can improve it by adding CSS Specificity.

Elements

Reset + Typography other elements

Classes

Layout Classes, Typography Classes other classes

ID’s

Layout ID and other ...

Here is practical demo .css file: CSS-Specificity-Model.css

Also live "lorem ipsum" working example: CSS-Specificity-Model.html

or you can download .zip of the example.

Note: The code used for this example is mainly taken from The Golden Grid - CSS Framework

In my opinion there is no perfect model for organizing your CSS, this model is just one way of approaching CSS.

Some other useful link and coding models:

Practical, maintainable CSS
Progressive Enhancement with CSS

What you think about this model?


3 Responses to “CSS Specificity Coding Method”

  1. // Blogger Christopher // 10/12/2009

    There is nothing a little firebug and cntrl-f cant solve. I say use what works best for you and your situation.  

  2. // Blogger Vladimir // 10/12/2009

    @Christopher: That is exactly my point: Use what works best for you and your situation. If this model makes sense for your coding and organization and you can find things quickly (even without firebug) , great. That is why I sad there is no perfect coding model, there is model that works or doesn't work for you :)  

  3. // Blogger M. // 10/14/2009

    Nicely put. I think anyone who's spent some time building CSS with the understanding that someone else may someday have to modify it will gravitate naturally to this way of thinking. (As often as not, that someone else is the same person who wrote the original code. After six months away from a project, it can be just as confusing as inheriting someone else's code, so there's a strong incentive to be organized.)  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License