このブログ記事は2012年2月に公開されたため、お読みいただいた時期によっては情報が古くなっている可能性があります。情報の正確性を保つため、これらの記事を常に最新の状態に保つことはできませんのでご了承ください。
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.
Grab the code
The tool is fully open sourced and is free to download from the project's GitHub page:
Please also feel free to share your comments and suggestions!
