Xin lưu ý rằng bài đăng trên blog này được xuất bản vào tháng 2 năm 2012, vì vậy tùy thuộc vào thời điểm bạn đọc, một số phần có thể đã lỗi thời. Rất tiếc, tôi không thể luôn cập nhật đầy đủ các bài đăng này để đảm bảo thông tin luôn chính xác.
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!
