MinCSS is amazing
I had this issue open in the bug tracker for Nikola (my static site generator) for a long time: "Add mincss support".
Well, no, it doesn't have it yet, but I did some research on whether it would be worth adding. And boy, mincss impressed the heck out of me.
You see, Nikola's themes tend to use unadultered bootstrap, which means they carry a large number of things that are not used in their CSS. Besides, it uses several stylesheets from docutils, pygments, and more.
What mincss does is examine your HTML and your CSS, and remove all the unused CSS. So, I wrote a script that examines the Nikola output and overwrites the CSS files with the minimal things that are actually needed there.
And the result?
Here is the before/after for each CSS file in Nikola's demo site:
bootstrap-responsive.min.css 16849 3251 bootstrap.min.css 106059 14737 code.css 3670 2114 colorbox.css 6457 774 rst.css 6559 2581 theme.css 1287 1061 ----------------------------------------- 140881 24518
But wait, Nikola supports bundling all those files into a single large CSS file to avoid network requests (using webassets). Does it work in that case too?
all-nocdn.css 167457 29496
But that is not all. The mincss files are not minified. Passing all-nocdn.css through Yui-compressor shrinks it further to 20599 bytes. Which, gzipped, is a paltry 4801 bytes. That means the complete styling of the whole site is a single CSS file less than 5KB in size.
That, is impressive.