Overview
Introduction
A hand-written or generated stylesheet often has room to shrink well beyond simply removing whitespace.
This tool minifies CSS using csso, which restructures and merges rules for additional savings, entirely in your browser.
What Is CSS Minifier?
A minifier that removes whitespace and comments, then applies structural optimizations like merging duplicate selectors and shortening color values.
The output renders identically to the input; only its size and readability change.
How CSS Minifier Works
csso parses the stylesheet, restructures its rules where it can prove the result is equivalent, and prints the smallest form.
A malformed rule is reported with an error instead of silently producing broken output.
When To Use CSS Minifier
Use it before shipping a standalone stylesheet that isn't already going through a build tool's CSS minification step.
It's also useful for quickly checking how much a specific block of CSS could shrink, without wiring up a build step just to find out.
Often used alongside CSS Formatter, CSS Validator and HTML Minifier.
Features
Advantages
- Runs entirely client-side.
- Goes beyond whitespace removal by restructuring rules for extra savings.
- Reports exact size savings, so you can see the impact before deciding to use the minified output.
Limitations
- Minified CSS isn't meant to be hand-edited; keep the original source as the source of truth.
Examples
Best Practices & Notes
Best Practices
- Check the size savings panel to confirm minification meaningfully reduced the file size.
- Run any hand-edited CSS through this after editing, since manual tweaks can reintroduce redundant declarations csso would otherwise merge.
Developer Notes
Uses csso's `minify()` function, dynamically imported so the minifier doesn't add to every other tool's bundle size.
CSS Minifier Use Cases
- Shrinking a standalone stylesheet before embedding it in a page
- Comparing minified vs. unminified CSS size
Common Mistakes
- Editing minified CSS output directly instead of the original source.
- Assuming minification removes unused selectors; csso only restructures what's already there, it doesn't perform dead-code elimination.
Tips
- If minification fails, run the CSS Validator first to confirm the input is syntactically valid.
- Compare the output against the CSS Formatter's result if you want to see exactly which whitespace and rules were stripped.