Minify CSS

Where the bytes actually go

Most of the saving is whitespace and comments, which in a hand-written stylesheet is a great deal — indentation, blank lines between rules, and the section headers that make a large file navigable are all pure overhead once it is served. Beyond that, values are shortened in ways that cannot change what they mean: a colour written as #ffffff becomes #fff, 0px becomes 0 because zero needs no unit, a leading zero in 0.5em goes, and margin: 10px 10px 10px 10px collapses to margin: 10px.

What is deliberately not done is the risky category. Merging rules with identical declarations, or reordering them, changes the cascade — and the cascade is the part of CSS where two rules of equal specificity are resolved by which came last. A minifier that reorders aggressively will produce a smaller file and, in a large stylesheet, a subtly different page. Duplicate declarations are frequently deliberate too, left in as fallbacks for older browsers that ignore the second one.

Nested rules and modern media range syntax are refused rather than minified, and the reason is worth stating because it is the opposite of what most tools do. The parser behind this predates both features, and when it meets something it does not understand it does not raise an error — it silently deletes it, so a nested block simply vanishes from the output and the page loses styling that nothing reported. Refusing the file is the honest answer. If your stylesheet uses native nesting or @media (400px <= width <= 700px), use one of the tools below.

As with markup, judge the result after compression. Stylesheets are served gzipped or brotli-compressed, and those algorithms already handle repeated whitespace extremely well — so a file that minifies by 30 per cent may only shrink 5 per cent on the wire. The saving is real and smaller than the headline number.

When you want something else

Lightning CSS is the right tool for modern stylesheets: it understands nesting, media ranges, colour functions and everything else added in the last few years, minifies harder than anything older, and will also transpile new syntax down for older browsers as it goes. esbuild --minify style.css is nearly as good and extremely fast. Both belong in a build step rather than a browser tab.

The far larger win is usually removing rules you are not using. A site built on a utility framework or a component library commonly ships stylesheets where most of the file is never matched by anything on the page — and PurgeCSS, or the framework's own build, will cut that by an order of magnitude. Minifying unused CSS makes unused CSS smaller; deleting it is the actual fix.