Evaluating Bourbon

I’ve been meaning to check out Bourbon for quite a while as a potential replacement/alternative to Compass. Some notes after finally kicking the tyres.

Firstly, Bourbon has a few different opinions to Compass that are worth knowing about.

In terms of CSS support they state that they attempt to support all the fairly bleeding-edge CSS3 stuff. As for browsers, all the usual suspects are supported;

  • Firefox 3.6+
  • Safari 4.0+
  • Chrome 4.0+
  • Opera 10+

…however, only flavours of IE from 9 and up are officially supported. They also don’t (and intentionally won’t) include any support for anything that requires an IE filter to work—which seems reasonable to me.

However—anecdotally—I saw a few commits while in poking around in the repo that seemed to indicate that IE 7/8 support is still being patched in where it makes sense. I suspect the “IE 9+” tag mainly stems from the refusing to include IE filters (i.e: opacity in IE < 9, for example).

Regardless, if you really need to maintain support for older versions of IE and still want to use Bourbon then you can always write & maintain your own mixins to wrap up these edge-cases. No biggie.

Another point of difference worth noting is that Bourbon doesn’t offer support for spriting images for you (a good thing, IMO), where Compass does.

Additionally Bourbon seems to be quite proactive about deprecating mixins and functions as browser support changes. This is awesome.

Finally, Bourbon is a SASS only library since v3.0.0, and has no dependancy on any external language. This is really excellent as it means that the library is platform agnostic and can cleanly be used anywhere SASS can. As an aside, check out the compact() function for some sexy SASS action!

Evaluating

I thought the best way to put Bourbon through its paces would be to try and convert over an existing Compass project and see how the process went.

Thankfully I have a moderately sized Rails app, with a bunch of stylesheets (~5K SCSS LOC) lying around. This app currently makes pretty heavy use of Compass’s CSS3 mixins, and some very limited usage of the Compass image spriting stuff.

Porting over

I was pleasantly surprised by how easy it was to port code over to Bourbon from Compass. The only real pain-points were several undefined mixins that we were depending on (opacity() and border-radius() were the main culprits), everything else had equivalent names and function signatures as you would expect. Awesome!

The only other pain point, was the image spriting stuff, which will need to be refactored away (read: deleted) later on. I didn’t want to bite it off for this test so I just picked through that code and commented it out for now.

All up I think it took me about 20 minutes to convert everything over and have the app booting and looking good without any errors.

Compile times

I also thought it might be interesting to check out the performance of the two to see if there was any substantial difference.

Given that I’m testing this against a Rails app, I altered some of the asset-pipeline config for the project;

config.assets.precompile = ["application.css"]

…so that we are only compiling out our main CSS file. Then to test the compile times we can just run;

rake assets:clean && time (RAILS_ENV=production rake assets:precompile >/dev/null)
Compass:
10.00s user 1.02s system 99% cpu 11.040 total
Bourbon:
8.81s user 0.96s system 99% cpu 9.781 total

This obviously includes Rails booting up so these numbers would be much, much higher than if you just directly ran sass.

Not a great deal of difference there really, though I think it might be interesting to see how that scaled to a really large quantity of SCSS.

tl;dr

At the end of the day it’s just CSS, right? Well, yeah.

But then again the value (for my use-case anyway) of using a tool like Compass or Bourbon is that it allows me to offload all responsibility for vendor-prefixed CSS3 stuff out of my app. This is pretty valuable.

I’m really loving Bourbon’s simplicity—it really is just SCSS. This means I can use it in non-ruby projects easily and don’t have to deal with the “magic” feeling that Compass comes with - needing config, a project, etc. When I do want to use Rails it’s just a Rails Engine. Too easy.

I also very much enjoy that they are opinionated about a few issues I care about, they are not afraid to deprecate mixins, and they don’t include any IE’s filter bullshit.

Bourbon is also potentially slightly faster.

I’ll be using Bourbon on new projects from here on.