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

Lately I have been testing out performance among css styles and I found that some of my very smart friends, started asking,”why aren’t you testing using IDs for the unique sections of the page?”.

This wasn’t a hard answer:

1. The element is not re-usable on that page.
2. This is the begining of a downward sprial into specificity
3. Usually, IDs refer to something very specific, and abstracting would be tough
4. Any performance gains picked up by using id, is negated by adding any other selector to the left fo that id

Lets delve into each of these issues at more length

The element is not re-usable on that page:

IDs are programmer’s equivalent to singletons.  There can only be one instance on the page.  This means there is no way to re-use it.  It’s usually a one to one relationship, and according to my speed testing, one line of css that’s only usable once is not a good value.  There IS a cost to css bloat.

This is the beginning of a downward spiral into specificty:

There are two main ways of overriding in css.

1. The cascade: (anything further down the css, can overwrite the previous css rules)
2. Specificity: the idea of creating weight by using weighted selectors.

The reason I say that specificity is a downward spiral is because the only way to overwrite a weighted rule is to add more weight..  plain and simple.  Now I am not just saying this because I heard it somewhere.  I have made and paid for this mistake.

.ModuleOfficeList .property-checkbox input
{display:block;margin-bottom:8px;_border:0px !important;}

.ModuleOfficeList .property-checkbox,
  .ModuleOfficeList .new-icon,
  .ModuleOfficeList .open-icon
{display:block}
...
.uid-officelistings .property-checkbox
{display:none !important; }

Above is real code from one of my own work from 2005.  As you can see, after awhile, I had to resort to some weighty selectors and the !important rule. This is very bad. Once we get to this point.. it takes us more time to hunt down the parent IDs we are going to use in order to overrule the current specificity. This is not team-friendly and definately not maintainable. Eventually you will specify yourself into a hole, and refactoring out specificity is nothing short of a nightmare.

On the other hand:

I have heard a few reasons why using IDs as selectors is a good thing. I’ll speak on them briefly:

Using ID selectors is faster
Yes, using ID selectors is faster than using class selectors for the simple reason that there can only be one id within a page. I even prove that is true, however the performance benefit is very small, and as soon as you add any other selector, the performance benefit is lost.

#profile-module {...}
#profile-module li {...}
.profile-module li {...}

The second selector is no faster than the third. That’s because CSS is read from right to left. so the
li
gets scanned first, which negates the speed of having an ID. Steve Souders explains how selector speed works.

IDs are meant for singletons
There are times when someone intentionally wants something to be used only once on a page. ID selectors would be useful for that purpose since they would signify once per page. My only argument here is my personal preference of having all my code be re-usable; especially since I don’t see CSS in a “programming language” way.

UPDATE: maintaible CSS / semantic HTML
There is a quite a huge following that believe using IDs are very helpful in creating maintainable CSS as well as creating a more semantic document in HTML. I think that Matt Wilcox sums it up best in his article about naming ID and classes properly. Matt brings up some valid points as reason for using IDs.

Update: Another Article advising classnames over IDs
A year after my initial post, Oli Studholme also made this post about ID selectors as well. We came up with similar conclusions. Thanks Oli!

Honorable Mention
It’s also worth mentioning, that I am not advocating getting rid of IDs from your markup alltogether. IDs can help speed up your javascript and they can relay meaning to your document.. all good things.

But in for CSS, I suggest not using id selectors. There are others that believe using id selectors do have purpose, however I dont find the good outweighs the bad. In the end, the choice is yours to make.

I know, I know..  this is a really simple process for those of you who have had more than an hour with jQuery.  But this article’s intention is to show just how quickly and how easily you can utilize jQuery’s robust features that make it so easy and fun to use.

So I am going to keep the explanation short and sweet. I think the code speaks for itself for the most part.

$(document).ready(function(){... does as you would think. Waits for the document to fully load.

$('.hide').hide; finds all elements with the “hide” classname and actually hides them. I am using this as opposed to hiding the elements via css so that those with javascript turned off will see the elements that are hidden. If I used css to hide the elements, then anyone with javascript turned off but have a css capable browser, would have a dysfunctional experience. Hiding elements via javascript ensures that those without javascript will still be able to see the hidden paragraph. nuf said, I think

From there, we are finding #link1 and adding a toggle when clicking. I love this because I dont have to find out the toggle status myself. I just add the two different toggle scenarios, separated by a comma, and I am good to go.

$(this).next() is how I get to the element I want to change. In this case, it is the node / element below the link that has been clicked. I kept the traversal code generic so I could use this anywhere. The only worry I have, is to make sure that the element to show / hide is precisely below the link which it relates to. This simple technique makes the code re-usable.

Next, I am using another of jQuery’s strengths by “chaining” my code to run on click. I do this by using dot for each new behavior I am passing.

.slideDown('slow').removeClass('hide').preventDefault; does three things:

• gives the element a slide down effect when showing
• removes the hide class from the element
• prevents the default behavior of the link

and that’s it!

JQuery uses very simple and familiar syntax for CSS developers and it uses techniques that make it much easier to focus on what you want the page to do as opposed to figuring out how to make it work.

Example:

Show

I wanted to share this because I had quite a time with saddle sores last year, and I found a cheap and easy way to remedy the problem. It’s a bit unconventional, but works like a charm.

Here is the story of last year’s saddle sore issue.
My first year into riding, I bought a beginner’s roadbike, a Bianchi Brava, which served me very well.
I bought the bike and replaced the Bianchi seat with a Serfas gel seat. The semi big one with the gel top and an inset to help alleviate pressure on the private parts..

Now let me start off by saying that most of my riding problems came from inexperience and lack of knowledge. That and inproper fitting to my bike. The road bikes of today are so well made, that it is hard to find a problem with the bike… more-so, it’s a problem with the rider.

Oh yeah… gel seat… I was getting more and more fit, so I decided to take a ride with one of my more experienced cycling friends. We rode about 60 miles that day. The saddle sores were are result of that ride and for quite a few reasons.

1. I needed to have some kind of chamois cream for that area between the private parts, that can trap humidity and use it to “wear down” your skin and allow bacteria growth.

2. I needed to wash up as soon as I was done with the ride and make sure to wash the particular area of question. (fairly common knowledge, but it’s still worth noting)

3. I needed a seat / saddle that fit my butt/legs correctly.

Funny enough, the cushy saddles that would seem to be a savior to your butt, are more commonly the cause of problems such as saddle sores. They are typically too wide for your legs to move around freely and they cause chafing on the inside of your legs.

This is what happened and I tried all kinds of creams on the market to fix the problem. It only kept getting worse. Some of those creams are expensive too! So I tried something totally unconventional and i rolled up some toilet paper like a sleeping bag, and then stuck one on each side of the inside of my legs. ( using boxers wont keep the TP there, so use tightey whiteys)
I left the TP there for several hours and got another batch. I did this for two days and the problem was gone. Very nicely done.

The cost of the TP was close to 10 cents for the problem and it’s always available.

That was something like the error I recieved on my SanDisk Digital Audio Player (DAP). What was I to do.. most of the software that was able to fix it, was for windows. So I did what any intelligent tech geek-monkey would do. I turned to searched the internet. Turns out that you need a FAT or FAT32 partition installed. Mine was formatted for Mac.

How it turned out formatted for Mac is another story: Seems that dragging and dropping files works fine on my mac, but deleting files doesn’t. For some reason, the settings.dat file on the DAP does not know that I deleted files, so it holds onto the disk space. This means that deleting a file removed it from the DAP, but didn’t clear up memory. Ugh. This is why I reformatted–so that i could reclaim the space I had lost.

Unfortunately, the DAP barfed at the idea of being formatted for a mac. Trusty Google pointed me to the right direction for windows users, which could help me fix the problem. On my mac, I started Disk Utilitiy and selected the dap disk, clicked on the “Erase” tab and Erased using MS-DOS as the format. That was it!!!
The DAP worked fine from there on.

Now to only find a way around the space saving issue….. So I tried deleting the settings.dat file. This works fine, except it removes ALL files, and settings from the DAP. failure: I tried opening terminal and going to /Volumes/SDCMX/ which is the DAP drive. I used “rm” to remove files I didn’t want and that worked great. The file was gone and the space was recovered.

Happy Days.

Okay so my first post about cycling. Here is my history of cycling:

When I was young, I rode a BMX bike like every other kid but didn’t find it all that exciting. I bought a Mountain Bike years later, when they had no font shocks. I took one 17 mile ride and near killed myself. I never got on that thing again.

Then the summer of 2005 came and my car broke down for the last time. At the time, money was no object… I didn’t have any, so my elder, pastor from church suggested a bike. My elder from church was a good friend and liked to ride. This seemed like a good idea to me, so I ended up buying a bike, much to his surprise.

It was a Bianchi Brava, an entry level road bike. I couldn’t see myself in a hybrid or a Mountain Bike.. I knew I was gonna be on the road. Once I started riding the 8 mile ride to Castro Valley Bart, I began to find out how much out of shape I was. It was scary to find out that mid-level exertion would put me down on the street seeing stars and wondering if I should call 911. I found the strength to make it the 8 mile rolling hills ride to Bart station, but not much more than that.

I found a friend to commute with all winter, so the bike went untouched all that time. I had rollers, for indoor training, but I igored them. Winter was gone and so was my ride… so I had to face up and get on the bike again. To my surprise, I signed up for an MS ride of 25 miles and I faired quite well. Feeling a renewed vigor, I vowed to do the 100 mile ride in September. (2 weeks from now) and Started a very unorganized training scheme. I started passing by the Bart Station once a week and began riding the whole 20 miles to work, which meant riding the Dublin Grade, and the Castro Valley Boulevard (CVB) Hill. For most good riders, this hill is nothing, for me, I would call it Everest because it was so tough for me.

Time went on and I learned much more about recovery, overtraining, hill climbing and heart rates. I also gained a lunchtime ride with two other co-workers. Cycling was becoming very fun, not just a commute. I started to force myself to find harder hills for me to climb. Fairmont avenue in San Leandro, was my first. The first time, it took me four stops to regain strength and composure to keep riding to the top. The second time I stopped only once. That is where I stand at this point. Only time will tell if the training has been enough.

So what about this Can’t buy speed thing.
The saying goes, that you can’t buy speed. One cannot go to their local bike store, plunk down 4-6 grand and come out with a bike that will take them to the Tour de France. Bikes are not what makes you fast. Pain, training, and good recovery are what makes you fast. Well, I don’t totally believe that anymore. (actually I do, but read on..  ) My Bianchi was a pretty good bike. 30 pounds of steel frame and triple chainrings. (yes, a granny gear because I was outta shape) Roadies will never let you down if they see you on a triple chainring bike, something about the granny gear being for wussies.

I always lusted after a nice expensive bike, but I knew that was not right. It just didn’t feel right to be salivating over a bike.  After lusting but thankfully, not buying an expensive bike, I had a friend that turned me to his brother’s wonderful alumnimum bike with upgraded components. 16 pounds and only two chainrings to avoid the heckling from roadies. After much thought, prayer and rationalizing, I bought the bike for under a grand. This bike was in no way, a need. Rather it was for fun and so I purchased it, keeping that in mind. After riding this bike, I no longer lusted after any other bike.

I found that I DID in fact buy speed. Lots of it. I jetted up the hills with just as much sweat and work, but without the granny gear, I got there much faster. The lighter bike afforded me to be able to ride the hills better. With a stiff frame, more of my efforts are translated to power going forward, instead of power getting absorbed by the bike. I get tingles just thinking about taking this new bike out. Not because it is the new, fangled thing.. hardly that, because it isn’t. This is a Fuji Robaix with upgrade components (ultegra) — not the most respected bike out there. This will not get me respect in the peleton, but hopefully my perfomance on it, will.