Introducing OSBCP CSS Squasher - YUI CSS Compressor gone clever?

As a web developer, I like to minify stuff left and right (for all the obvious reasons) and minifying CSS is not an exception.

There are tons of minifier tools out there, but since I am a Java developer by heart, I usually use the YUI CSS Compressor. It's a great and efficient minifier, but I have found one flaw.

The flaw of YUI Compressor

To dive right in, here is an example. Lets say this is my CSS:

image {
    border: none;
}

image {
    border: none;
}

image {
    border: none;
}

image {
    border: none;
}

If I would run this through the compressor I would get the following output:

image{border:0}image{border:0}image{border:0}image{border:0}

However, wouldn't having a single "image{border:0}" be enough?

Or if the CSS was:

image {
    border: none;
}

no-border {
    border: none;
}

table {
    border: none;
}

The output would be:

image{border:0}no-border{border:0}table{border:0}

Buy why not "image,no-border,table{border:0}"? It is actually 19 characters less and would have the same results.

I think you get my point by now. Even though the YUI CSS Compressor is crude and efficient, it's not designed to minify your CSS by analyzing and re-organizing it. However, a tool that could do just that would be cool, wouldn't?

My personal solution: OSBCP CSS Squasher

So my solution to this situation was to actually write my own minifier; OSBCP CSS Squasher. A minifier that reads and parses my CSS then merges, squashes and refactors the CSS to decrease the length.

It converts CSS like this:

a {
    width: 100px;
    color: red;
}

b {
    width: 100px;
    color: red;
}

c {
    color red;
}

d, e {
    margin: 10px;
}

e, d {
    padding: 10px;
}

To this:

a, b {
    width: 100px;
}

a, b, c {
    color: red;
}

d, e {
    margin: 10px;
    padding: 10px;
}

Then it uses the YUI CSS Compressor to turn it all into this:

a,b{width:100px}a,b,c{color:red}d,e{margin:10px;padding:10px} 

That's about it!

Comparison numbers

Here are some fancy numbers compared to just using the YUI CSS Compressor.

The down-side: It breaks CSS inheritance

However, this minifier is far from being silver bullet. The biggest and obvious flaw of this tool is that it rearranges your CSS, possibly breaking your CSS inheritance. Even though I don't use CSS inheritance, and actually try and avoid it due to its downsides, it is something the developer should know before using tools like this.

Online tool

For demonstration purposes, I have created an online tool:

http://osbcp-css-squasher-demo.appspot.com/

Feel free to use and share your comments

The tool is fully open sourced and is free to download from the project's Github page:

https://github.com/corgrath/osbcp-css-squasher

Please also feel free to share your comments and suggestions!