이 블로그 게시물은 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!
