Why format CSS?
Unformatted CSS — whether minified for production, generated by a tool, or hastily written — is painful to read. Properties merge into dense lines, selector specificity is hard to trace, and debugging requires mental parsing before you can even understand the structure. A CSS formatter transforms chaotic stylesheets into clean, consistently indented code in seconds.
Formatting is especially valuable when working with third-party stylesheets, CSS extracted from browser DevTools, or vendor CSS that you need to inspect or modify. It's also useful for standardising code style when onboarding legacy projects that don't have a formatter configured.
CSS minification
Minification removes all unnecessary characters from CSS — whitespace, newlines, comments, and redundant semicolons — without changing the stylesheet's behaviour. A typical CSS file shrinks by 15–30% after minification, and further compression (gzip/brotli) reduces the payload even more.
In production, minified CSS means faster downloads and faster parsing. Every kilobyte matters on mobile networks and for Core Web Vitals scores. Most build tools (webpack, Vite, esbuild, Next.js) minify CSS automatically in production builds, so you rarely need to minify manually — but this tool is handy for one-off tasks or inspecting what the minified output looks like.
Don't minify CSS in your source code. Keep your source formatted and readable, and let the build pipeline handle minification. Source maps bridge the gap, mapping minified production CSS back to your formatted source for debugging.