CSS Minifier
Strip comments, whitespace, and redundancy from CSS. See size before/after and the saving percentage.
What is this for?
CSS written for readability — with comments, indentation, whitespace, and semantic line breaks — creates unnecessary overhead when shipped to users. This tool applies structural minification: it removes comments, collapses whitespace, strips redundant units and zeros, and shortens colour codes, all without altering the stylesheet's meaning or behaviour. You paste in CSS, it shows you the before and after size, and you see exactly how many bytes you've saved.
When to use it
- Shipping CSS inline in HTML emails or blog post templates where you want to cut bytes but don't have a build pipeline available.
- Pasting a vendor's pretty-printed stylesheet into a third-party widget or embed, where file size matters more than readability.
- Quickly auditing how much "fat" exists in an unoptimised stylesheet before deciding whether to wire up a full build-chain optimiser.
- Minifying a single CSS file for production when your project doesn't use a bundler or build tool yet.
- Testing whether minification alone makes a meaningful difference to your delivery size before investing in CSS tree-shaking or unused rule removal.
- Preparing a stylesheet for inclusion in a static site generator that doesn't have CSS optimisation built in.
How it works
- Strips comments: Removes all
/* … */block comments (single-line//comments aren't valid in plain CSS). - Collapses whitespace: Removes unnecessary spaces, tabs, and line breaks around braces, colons, semicolons, commas, and combinators (
>,~,+). - Trims trailing semicolons: Drops the final
;before closing braces where it's redundant. - Optimises numbers: Converts
0.5to.5, removes units from zero values (0pxbecomes0), and shortens hex colours where possible (#aabbccbecomes#abc). - Shows compression ratio: Displays original size, minified size, and percentage saved so you can quantify the benefit.
Common gotchas
- Not a full optimiser: This tool performs structural minification only. It won't merge duplicate selectors, reorder rules to eliminate specificity bloat, or rewrite shorthand properties. For comprehensive optimisation, integrate
cssnano,esbuild, orlightningcssinto your build pipeline. - No source maps: Minified CSS has no source map generated. If you need to debug in production, you'll need to maintain and ship source maps separately.
- Minification + transport compression: Modern gzip and Brotli compression on the wire already remove much of what minification targets. The real file-size wins come from removing unused CSS rules entirely — a job for tree-shaking tools, not minification.
- Keep source readable: Always commit clean, commented, indented CSS. Minify only at build or deploy time. Mixing minified and source code in your repository makes diffs impossible to review.
- Edge cases with whitespace: The minifier preserves whitespace within quoted strings (e.g. in
content:declarations) and between selectors where it's syntactically necessary.
Limitations and next steps
- This minifier handles standard CSS. Nested syntax (SCSS, Less) must be compiled to plain CSS first.
- For maximum compression, combine minification with HTTP transport encoding (gzip or Brotli) and unused CSS removal.
- Consider critical CSS inlining and defer/async loading for stylesheets not needed on first paint.