Understanding CSS formatting
Declarations, selectors, and the shape of a stylesheet.
The formatter's job is to make a stylesheet readable; the minifier's job is to make it small.
The grammar of a rule.
A CSS rule is a selector list, an opening brace, a list of property-value declarations separated by semicolons, and a closing brace. The formatter standardises the whitespace around each: one space after the selector list, one declaration per line, two-space indentation, a space after each colon, a trailing semicolon on every declaration.
Comments and source order.
CSS only has block comments — /* … */. The formatter preserves them exactly where they are. Source order matters in CSS: when two selectors of equal specificity target the same property, the later one wins. Beautifying never reorders rules.
Specificity and the cascade.
The format of a stylesheet doesn't change which selectors win — that's determined by specificity (an ID beats a class beats a tag) and source order. The formatter is purely cosmetic: it never changes how the styles apply. That's important for refactoring: you can run a beautifier across an entire stylesheet without worrying about visual regressions.
Sass / SCSS / Less.
The formatter reads vanilla CSS — selectors, properties, and at-rules. Sass-style nested selectors, variables ($color), and mixins (@include) are CSS-incompatible extensions; pasting them in won't throw an error in most cases, but the output may not be what you expected. For pre-processed sources, format the source language and let your build pipeline emit clean CSS.
Modern CSS the formatter understands.
Custom properties (--color), nesting (the new native CSS nesting added in 2023), @layer, @container, @supports, and colour functions like oklch() all parse cleanly through the Prettier-backed formatter. If your formatter shows odd output for a feature that's only a year or two old, the cause is usually an outdated parser rather than a syntax error.