CSS Minifier and Beautifier

Minifying removes what the browser does not read: comments, indentation, the newline after every declaration, the final semicolon in each block. A typical hand-written stylesheet loses a quarter to a third of its bytes, and none of its meaning.

The trap is that whitespace in CSS is sometimes load-bearing. In calc(100% - 2rem) the spaces around the minus sign are required by the specification. Remove them and you get calc(100%-2rem), which is invalid — and CSS fails silently, so the browser drops that one declaration and your layout changes with no error anywhere.

This minifier tracks parenthesis depth. Outside parentheses, + and ~ are selector combinators and the spaces around them go. Inside, they are arithmetic and the spaces stay.

Strings and comments are handled by walking the text, not by regular expression. A URL containing /*, or a content property holding a quote, defeats the regex approach — and the failure is a stylesheet truncated from that point on.

Comments beginning /*! are kept. That is the convention for licence headers, and stripping them from a library is a licence violation rather than an optimisation.

Press "Load a sample" and minify it. The sample is written to contain the traps: a calc() with spaces, a comment, a grouped selector, ana:hover pseudo-class and a media query. Check the output — calc(100% - 2rem) survives intact, the comment is gone, and @media (min-width:560px) keeps its structure.

Beautifying is the more common need in practice. You are looking at a minified stylesheet from a site, or a build output you need to debug, and it is one line 40,000 characters long. Expanding it makes it readable — the round trip through minify and back is lossless except for the comments, which were already gone.

An honest note about where this fits. If you have a build step, use it — a real toolchain also merges duplicate rules, shortens colours, and removes declarations that are overridden later. This tool is for the cases where you do not have one: a snippet for an email template, a stylesheet you were handed, a theme file in a CMS text box, an inline block in a landing page.

Compression matters more than minification. Gzip and Brotli already collapse repeated whitespace very effectively, so a minified file often gzips to only slightly less than the original. Minify anyway — it is free — but if the file is served uncompressed, fixing that is worth ten times more.

For markup rather than styles, the HTML minifier handles the whitespace rules that apply there.