CSS Minimizer

Update 5 April 2012:
One more algorithm added. Now CSS Minimizer is powered by Closure Stylesheets Compiler developed by Google.
————————————————————————————–

In my earlier days when I was very new, i worked on some amazing web apps, those are still running, because as i am learning more and more everyday I continuously updated those project’s back-end  code with the technique that was best at that time in my knowledge. But problem remain with the front end, because I can’t replace the front end with fully new layout because its a huge task, to update the layout when i opened the CSS file i felt lost, the front end css i wrote then was horrible, and with continuous tweaking css became huge in size and tons of duplicated rules.

So I decided to make a CSS optimizer or minimizer whatever you call it. Its a two part project I just finished the first part. You can try it here http://css-min.appspot.com. Second part is a site analyzer, that will analyze the whole site and tell you which CSS selectors are obsolete (pretty amazing huh?!)

How CSS Minimizer works:

It takes a css url then it grabs that css for analyze. The analysis proses is somewhat complex but to say in simple way “it reduces all duplicate rules”. Unlike other css minimizer it just doesn’t remove the white-space and newline character but it rewrites the whole css in a very optimized way.

For example:
Suppose this is your original css:

.sel_a{font-family:'arial';font-size:10pt;}
.sel_b{font-size:10pt;}
.sel_c{font-size:10pt;letter-spacing:1px;}
.sel_d{padding:0;margin:0;}
.sel_e{font-weight:bold;text-decoration:underline;}
.sel_f{font-family:'verdana';}
.sel_g{font-weight:strong;font-size:12pt;}
.sel_h{font-weight:strong;font-size:12pt;}
.sel_i{font-size:13pt;}

Minimizer will rewite it this way:

.sel_g,.sel_h{font-weight:strong;font-size:12pt}
.sel_i{font-size:13pt}
.sel_d{padding:0;margin:0}
.sel_c{letter-spacing:1px}
.sel_f{font-family:'verdana'}
.sel_e{font-weight:bold;text-decoration:underline}
.sel_a{font-family:'arial'}
.sel_a,.sel_b,.sel_c{font-size:10pt}

Look carefully how the selectors have been rewritten by minimizing the duplicate rules.

In minimized CSS ofcourse white-space, newline character, comments etc those will be removed.

CSS minimizer can’t dramatically reduce the amount of code like JS minimizer, because we can’t rename the selectors or style rules, but you can follow some techniques for that like use shorter class, ID names, never use long nested selectors AND of-course always check your css with CSSLint (an Amazing tool).

I hope you will find this tool useful. Please do comment and give me feedback here, that will help me to improve this tool.

NOTE: As this is the alpha version of this minimizer, there are few known issues with of-course with some unknown issues too. So i recommend take cautions before using its minimized css with your production level code.