Different CSS techniques and their performance

Why would I want to test performance of CSS techniques?

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).

16 comments

  • Davey

    I’m so glad you took the time to do this. Working on a pretty big project at the moment, and I’m in the process of standardising our css approach, with optimisation foremost in our requirements.

    This will be a big help.

  • Simon Verboven

    I’m so glad someone actually took the time to benchmark this once and for all. I’ve had so many thoughts and discussions regarding the use of OOCSS VS @extend and this really helped me decide on what approach I’ll be following from now on. I’ll be going for @extend, since it is a very small price to pay (the performance difference is minimal) to have semantic class names, which make future redesign & implementation so much more clear.

  • Jasmine

    Thank you very much for sharing your results! This was very helpful in making some decisions in regards to how to balance combining thoughts behind OOCSS with SASS’s features. I am glad to know that many simple selectors attached to the same rule are not disadvantageous to requiring a second class to represent the shared styles.

  • Tom Gillard

    Fantastic article. I’ve been wondering the same thing when it comes to using @extend on a silent/placeholder class in Sass (eg: %box {}).

    I too am a big fan of oocss and smacss. I wonder what the impact of adding extra classes to the html has on site performance ie: I wonder if what you are saving in css performance you’re losing in html performance from extra classes being added to markup.

    Anyway, I much prefer to have lean, dry css with additional classes in the markup anyday.

    Once again, great job!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>