CSS Minifier

CSS is render-blocking: the browser will not paint the page until the stylesheet has downloaded and parsed. That makes it the one asset where minification has a direct, measurable effect on how fast a page appears, rather than just on how much bandwidth it uses.

What the minifier removes

Comments go first — they are notes for humans and are never part of the cascade. Then the whitespace that carries no meaning: the newlines between rules, the indentation inside a block, and the spaces around braces, semicolons and colons. A declaration written across four lines becomes one, and the whole sheet collapses to a single stream of rules.

What it must never touch

CSS uses whitespace as syntax in a few places, and this is where naive minifiers break stylesheets:

The rule the minifier follows is simple: collapse a run of whitespace to a single space where a space is meaningful, and delete it entirely where it is not. Getting that distinction right is the whole job.

What this tool deliberately does not do

A full CSS optimiser can also shorten hex colours, convert rgb values, strip units from zero lengths, merge duplicate rules and reorder declarations. Those transforms change the text of your CSS and occasionally change behaviour, so they belong in a configurable build step you can test against your real pages. This minifier does the safe, universal part — comments and whitespace — and leaves the rest alone.

Where it fits

Keep the readable, commented stylesheet in source control and minify during the build, so the file you ship is small and the file you maintain is legible. For a quick one-off — inlining critical CSS into a document head, or shrinking a snippet for an email — minifying by hand here is the fastest route.