C↓CSS Minifier

Minifying CSS saves less than you think, and it is worth knowing that before you build a workflow around it.

On a hand-written stylesheet you will typically strip twenty to forty percent of the bytes, more if it is heavily commented. Then gzip or Brotli compresses what is left, and compression is very good at repetitive text — which is exactly what CSS is. The two overlap. A minified file and an unminified one, both compressed, often differ by a few hundred bytes.

That is not an argument against doing it. It is an argument against treating it as a performance strategy. If a page is slow, the stylesheet is rarely why.

What gets removed

Comments, indentation, line breaks, and the whitespace around braces, colons and semicolons. The final semicolon before a closing brace goes too. None of it changes how a browser interprets the rules, because whitespace between tokens in CSS carries no meaning.

This is a conservative minifier. It does not rewrite colour values, merge duplicate selectors, or reorder anything — so it will not break a stylesheet that depends on source order, which more of them do than their authors realise.

Keep the original

Minified CSS is not meant to be maintained by hand. Edit the formatted file, minify on the way out. If you are pasting the output back over your only copy, you have made your next change considerably harder.

For a project of any size this belongs in a build step rather than a browser tab, so the minified file is regenerated from source every time rather than drifting out of sync with it.

Where the real gains are

Critical CSS — inlining the styles needed for the visible part of the page and loading the rest asynchronously — changes perceived load time far more than minification does. So does removing the stylesheet for a component you stopped using six months ago.