🎨 CSS Minifier

Minification works because CSS is whitespace-tolerant in most places. The parser first sets aside the regions that must not be touched, then compresses everything else. Comments are removed, unless they open with an exclamation mark, which by convention marks a licence or attribution block that build tools preserve. Newlines, tabs and runs of spaces collapse away.

Next the tool removes whitespace that sits next to punctuation with no syntactic meaning: before and after braces, after semicolons, around the colon separating a property from its value, around commas in selector lists and value lists, and around the child, adjacent sibling and general sibling combinators. The semicolon before a closing brace is redundant because the brace already ends the declaration, so it goes too.

The protected regions matter. Inside calc, the CSS specification requires spaces around the plus and minus operators, because without them a leading sign is parsed as part of the number rather than as an operator. Removing those spaces produces a declaration the browser discards entirely. String literals, such as content values and font family names in quotes, keep their whitespace because it is meaningful data rather than formatting.

Take a small rule written the way a developer would type it. A comment line reading slash-star card star-slash, then a selector line for the card class with its opening brace, then two indented declarations setting margin to zero auto and padding to sixteen pixels, each ending in a semicolon, then a closing brace on its own line. Written that way with two-space indentation and newlines, that block is 55 bytes.

The minifier removes the comment, all four newlines, both two-space indents, the space before the opening brace, the spaces after each colon, and the semicolon before the closing brace. Note that the space inside the value zero auto survives, because it separates two components of a shorthand value and is meaningful.

What is left is the selector, an opening brace, the margin declaration, a semicolon, the padding declaration and a closing brace, with no whitespace other than the one inside the margin value. That comes to 33 bytes.

The saving is 22 bytes, and 22 divided by 55 is exactly 0.4, so the tool reports a 40 per cent reduction. Real stylesheets with heavier commenting and deeper indentation commonly land in a similar range.

Minified CSS is for delivery, not for editing. Keep your readable source file under version control and treat the minified output as a build artefact, regenerating it whenever the source changes. Editing a minified file directly is painful and the mistakes are hard to spot, since everything sits on one line.

The size saving is worth having but keep it in proportion. Most web servers also apply gzip or brotli compression, which is very effective on repetitive text, so a stylesheet that minifies by 30 per cent may only gain a few per cent more once compression is applied on top. The larger real-world win usually comes from removing rules you no longer use rather than from squeezing whitespace.

Before deploying, load a page with the minified file and check anything involving calc, media queries, animations and content strings, since those are where minification bugs surface. If a declaration has silently stopped working, compare it against the source. Keep the licence comment toggle in mind when you minify third-party code, as stripping required attribution can breach the licence you are distributing under.