I’ve been spending all of my personal time working on a rather complicated system to help improve development in JavaScript/HTML. One of the steps of the deployment process is to “minify” or “collapse” CSS (JS is a whole other topic).

I had high hopes for minifiers. It seems like a really obvious thing to do, take all the required CSS, load it into memory, inspect obvious scenarios for collapse, remove redundant definitions, combine duplicate definitions and then remove all extraneous white-space. Sounds simple… well reasonable.

So I decided to put together a simple side-by-side comparison of the tools on a very simple CSS sheet. I’m less concerned with the exact amount of compression (which it seems is the only thing anyone else cares about), and more interested in what rules are being followed here.

 

The CSS

The starting CSS looks like this:

The Challenges

There are a few very simple things I’ve done in here to see what the tools can do.

First you will see that in .secondView the display attribute is duplicated. This seemed simple.

Next, and likely not as obvious, is that .firstView and .mainView are the same (and adjacent to one another, which matters in CSS due to precedence order). With any second pass processor this should be obvious as well.

Then, .test1 class defined at the end is a duplicate selector that, again, is adjacent. Unlike the first and main items above, these rules have different attributes, so can they be combined properly.

There are a few simple items, like: are comments removed properly and does the IE specific !important rule stick around.

And lastly I was looking for the standard reductions in white-space while maintaining any obvious needs like the space in the middle of the .mainView .title definition. Anything that messes that up needs to be thrown our immediately.

The Challengers

There are a few CSS minifiers out there and it’s fair to say I didn’t try all of them. But I tried the big hitters. I’m a Node.JS lover and built this test there. So these tools happen to all be node-capable as well.

Clean-CSS
CSSO – this was my favorite going in, but the test is well worth it
NCSS
YCSS-Min
YUI Compressor – somewhat of a standard in the world of js and css compression. It’s slow as heck, but extremely well-tested and complete

The Results

The results (shown here) of the test show that for my very simple test file there were only a few things that could be done. But given that fact there were still some interesting findings. First, no one found the duplicate display:none definition. That remained in every case. And, second, most of these compressors are doing nothing to attempt to collapse adjacent or similar rules. Though 2 of them are:

 

My Favorite

CSSO remains my go-to for CSS compression and it really hits almost all of the marks. I’m disappointed that it doesn’t find the duplicate definition. This is the resulting CSS (with line-breaks added for readability) from CSSO.

 

The Test Script

And finally I will include the script here so you can run the test yourself and possibly include your own tools to test with.