Different CSS techniques and their performance

Here’s the background:
I am a big fan of OOCSS, (the library and the concept) but I have been using Compass, SASS lately at work. I was feeling that sometimes OOCSS and SASS seemed at odds. A friend of mine introduced me to Chris Eppstein, (the creator of Compass) and we talked about the @extend method in SASS. So I created a CSS test page, which started out as a crude way to figure out if there was a noticeable performance difference between SASS’s @extend and OOCSS’s method of CSS.

How the test works

The test makes almost 2000 boxes, all with unique backgrounds (and style rules). There are a few formats for testing (seen in the links below), and you can change to each, and test the speed differences.  Just click the links according to the style you desire.

The test uses a small script I found while researching into this test.  The script comes from Steve Souder’s blog post: Performance Impact of CSS Selectors

Steve’s post goes into a more granular approach of css selector performance, it’s worth the read.

CSS Formats

1. OOCSS (likely fastest) double class ie.. class="box box-#" and put the base css rules on the .box class then only add the background to the unique classes
2. Sass @extend (unsure of speed) one class ie.. class="box-3" and create a multi-selector rule with the base rules ie. .box-1, .box-2 {generics}
3. Blatantly Bloated CSS: add all the base css to each uniqe css file. not DRY
4. Using ID selectors Although I dont suggest this as a best practice.. it’s worthwhile for testing
5. No CSS makes for a good baseline for testing

Code samples?

OOCSS style: one master class that holds all common rules, then an additional class for unique rules

.box {padding:25px;border:1px solid #000;border-radius:5px;}
.box-1 {background-color:#FFEE00;}
.box-2 {background-color:#00FFee;}

@extend style: add all unique classes to one, comma separated list of classes that use the base.

.box-1,.box-2 {padding:25px;border:1px solid #000;border-radius:5px;}
.box-1 {background-color:#FFEE00;}
.box-2 {background-color:#00FFEE;}

Long (or Bloated) styling: add all the common rules into each unique class separately

.box-1 {
  padding:25px;
  border:1px solid #000;
  border-radius:5px;
  background-color:FFEE00;}
.box-2 {
  padding:25px;
  border:1px solid #000;
  border-radius:5px;
  background-color:00FFEE;}

No CSS: kinda self explanatory

Testing Results

The testing results were quite interesting..   Lets check out some charts shall we?

So lets talk about CSS performance first.  Here are some things I see:

• Using class selectors is almost identical speed to ID selectors
• SASS/Compass’s @extend format is only slightly behind OOCSS format
• The bloated format is orders of magnitude slower than the other formats
• Even in this somewhat extreme example, the difference from best to worst is 100-200 milliseconds

And some notes on the browsers’ performance: (extra credit)

• Most the browsers behaved about the same, just some were slightly faster
• Firefox was the slowest of the browsers tested
• Opera was fastest with fast CSS and slowest with slow CSS

I personally have come to two conclusions after doing this test.

1. OOCSS and @extend format are very fast
2. CSS Bloat does hurt performance

Oh.. and here is the test page

UPDATE:

I found some discrepancies in the testing that could affect testing, so I have removed any external file references and css rules that are possible performance gotchas (like text-shadow).