Why CSS formatting matters
CSS written by hand develops inconsistent indentation, mixed spacing around colons, selectors split across lines, and properties in no particular order. CSS generated by preprocessors, build tools, or AI-generated code is often either unformatted (one long line) or using a different convention than the rest of your stylesheet. Consistent formatting makes diffs smaller, code reviews faster, and onboarding easier.
Minification is the production-time counterpart: maximum compression for the fastest possible delivery.
What the formatter does
The formatter processes CSS as a flat character stream, tracking:
- Nesting depth: Each
{increases the indent level, each}decreases it. This handles media queries,@supports,@keyframes, and other at-rules with nested blocks. - Property lines: Content between
{and}that ends with;is treated as a property declaration and placed on its own indented line. - Strings: Content inside
'...'or"..."is not split or reformatted, protecting URLs, font names, andcontentvalues. - Functions: Content inside
(...)is kept intact, protectingcalc(),color-mix(),var(), and custom property references. - Comments:
/* ... */comments are preserved in formatted output and stripped in minified output.
What minification does
CSS minification applies a series of safe transformations:
- Strip all
/* ... */comments (configurable —/*!preserved comments are a common extension but not implemented here). - Collapse consecutive whitespace to a single space.
- Remove whitespace around
{,},;,:, and,. - Remove the last semicolon before
}(redundant in CSS).
The result is syntactically identical — any CSS parser, browser engine, or PostCSS plugin will produce the same cascade from the minified stylesheet as from the formatted version.
Minification + gzip: the real numbers
CSS minification alone typically saves 20–30% by removing comments and whitespace. But CSS bytes are highly repetitive — property names and values repeat across rules — which makes gzip extremely effective. The combined savings from minification + gzip compression (which all modern HTTP servers apply automatically) typically produce 70–85% reduction from the original formatted source.
For a 50 KB formatted stylesheet:
- Minified alone: ~35 KB
- Original + gzip: ~12 KB
- Minified + gzip: ~9 KB
The 3 KB difference matters at scale (millions of pageviews) but is invisible for small sites. Still, minification is free in any build pipeline that uses PostCSS or Webpack, so there's no reason not to.
CSS nesting: what's supported
The formatter handles standard CSS nesting as encountered in build tool output (Tailwind, PostCSS nesting plugin, compiled Sass). It does not handle native CSS nesting syntax (where selectors nest using &) — that feature is part of CSS Nesting Level 1, currently in limited browser support. For native nesting syntax, the formatter may produce unexpected indentation.
For SCSS or Sass source files, run the Sass compiler first to produce standard CSS, then format the output.
At-rules
The formatter handles all standard at-rules:
@media,@supports,@layer,@container: block at-rules that contain nested rules, formatted with indentation.@import,@charset,@namespace: statement at-rules that end with;, formatted as single lines.@keyframes: block at-rule with nested stop rules (0%, 100%, etc.), indented correctly.@font-face: treated as a regular rule block with properties.