Why minify CSS?
Every byte of CSS must be downloaded by the browser before it can render a page. Minification reduces file size — typically by 30–60% — by removing characters that the browser doesn't need: whitespace, newlines, comments, and redundant semicolons. Smaller files download faster over mobile connections, reduce bandwidth costs, and improve Lighthouse/PageSpeed scores. Minification is a standard step in any front-end build pipeline.
What this minifier does
The minifier performs these transformations: removes all /* */ comments, collapses all whitespace and newlines to single spaces, removes spaces around { } : ; , > ~ +, removes trailing semicolons before closing braces (the last semicolon in a rule block is always optional in CSS), removes units from 0 values (0px → 0), and removes leading zeros from decimals (0.5 → .5).
What it does not do
This is a lightweight minifier — it doesn't perform advanced optimizations like combining duplicate selectors, removing unused rules, shortening color values (#ffffff → #fff), or rewriting shorthand properties. For those optimizations, consider a build-time tool like cssnano or CleanCSS. This tool is ideal for a quick manual minification pass or for checking how much your CSS can compress.
Before deploying minified CSS
Always test minified CSS in a browser before deploying. While the transformations applied here are safe, complex selectors or content strings that look like CSS syntax could in rare cases be affected. Keep your original source files in version control and only deploy the minified output. If you're using a build tool like Vite, Webpack, or Parcel, CSS minification is likely already happening automatically in production builds.