How to minify CSS (and what gets stripped)
The honest pitch for a CSS minifier — what it actually does, what the byte savings really look like, and when you should not bother.
Minifying CSS is one of those tasks every front-end engineer does at some point and then forgets about. Modern build tools handle it automatically — but when you're shipping CSS without a build step (an email template, a static page, a CMS field), a stand-alone minifier earns its keep.
What "minifying" means here
The CSS Minifier does three things:
- Removes
/* ... */comments (it preserves/*! important */license comments). - Collapses every run of whitespace to a single space.
- Tightens punctuation: removes whitespace around
{ } : ; ,and drops the last semicolon before a}.
That's the safe minimum. There are minifiers that go further — merging duplicate selectors, collapsing shorthand, dropping unused vendor prefixes — but those need a real CSS parser, and any of them might change semantics in edge cases. The version here is byte-for-byte equivalent to the source: it just removes characters the browser doesn't need.
What you actually save
Hand-written CSS minifies to about 60–75% of the original size. Most of that is whitespace; the rest is comments. Once you compress with Gzip or Brotli (which every host does automatically), the win shrinks to roughly 20–35% smaller on the wire — because Gzip is already great at deflating repeated whitespace.
So: a 10 kB stylesheet becomes ~6.5 kB minified, ~2.5 kB gzipped raw, and ~2 kB gzipped minified. The minified-and-gzipped win is real but small in absolute terms.
When minifying by hand is the wrong move
Three cases where a stand-alone minifier is the wrong tool:
You have a build step. Next.js, Vite, Astro, SvelteKit — every modern toolchain minifies for you in production. Adding a manual step duplicates work and risks shipping double-minified or stale output.
Your CSS is dynamic. If your CSS is generated at request time from theme variables, minifying once and caching is fine. But minifying a template-with-placeholders breaks template syntax. Use a tool that understands the template, not a generic minifier.
Your CSS is critical-path inlined. Critical CSS — the small block of styles you inline into <head> to render above-the-fold content — should already be small enough that minification gives single-digit byte savings. The reading-time cost of a slightly-larger inlined block is zero. Don't bother.
When it earns its keep
- Static stylesheets in plain HTML pages.
- CSS inlined into newsletters or transactional emails (where every byte costs RPM at scale).
- Style blocks embedded in JavaScript strings (every byte hurts here twice — JS bundle and runtime memory).
- One-off snippets you're embedding in a CMS field.
Paste the source, copy the output, ship. Then forget the tool exists until next year.