{Carrer web log} ←

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:

• CSS Reset


• CSS Layout


• CSS Typography


• CSS Other

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. //  cpmaynard // 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. //  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. //  M. David Green // 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