📦 CSS Minifier

📘 Complete Guide to CSS Minification

Every kilobyte of CSS delays your page's first paint — and unminified stylesheets ship with comments, indentation, and whitespace that exist purely for humans. Minification deletes all of it in milliseconds, for free, with zero visual change. This guide explains what happens under the hood, how minification fits into performance strategy, and the gotchas to avoid.

What minification changes (and what it does not)

A minifier is a safe, mechanical transform: it removes comments, collapses whitespace, drops the last semicolon in each rule block, strips units from zero values, shortens colors, and may merge adjacent identical selectors. It never reorders rules in ways that change the cascade, never renames your classes, and never alters a single rendered pixel. If your minified CSS looks different in the browser, the minifier has a bug — or your original CSS relied on something fragile like a missing semicolon that formatting was masking.

Where minification fits in web performance

CSS is render-blocking: browsers will not paint content until stylesheets download and parse. On a slow mobile connection, a 200 KB unminified stylesheet can cost a full second. Minification typically saves 20–40%, and combined with Brotli compression the total reduction reaches 70–85%. It is one of the highest-ROI optimisations in web development because it is fully automated — set it up once in your build and forget it. Other CSS performance wins to pair it with: removing unused CSS, splitting critical above-the-fold CSS inline, and deferring non-critical stylesheets.

Minify vs pretty-print vs source maps

Your workflow should keep three artifacts: the source (readable, commented, version-controlled), the minified build (what users download), and optionally a source map (.css.map) that lets browser devtools show you the original source while debugging the minified file. This tool produces the minified output; for ongoing projects, integrate minification into your build (Vite, webpack, and PostCSS all do it with one plugin) rather than minifying by hand each deploy.

Common gotchas

Hacks and filters: ancient IE hacks can confuse naive minifiers — test in target browsers. Important comments: license headers (like /*! ... */) are conventionally preserved; check your minifier keeps them if legally required. Charset: if your CSS contains non-ASCII (content strings, font names), ensure the @charset "UTF-8" declaration survives as the very first bytes. Do not minify twice — it is idempotent but pointless, and double-processing occasionally mangles edge cases.

Privacy note

Your stylesheets may contain revealing class names or comments about unreleased features. Minification here runs 100% in your browser — your code never touches a server.