A CSS formatter takes compact, minified or disorganised CSS and re-formats it with one property per line, consistent indentation, and proper rule spacing. Formatted CSS is much easier to read, debug, and maintain.

CSS Formatting Best Practices

One CSS property per line — easier to read and produces cleaner git diffs
Put the opening brace { on the same line as the selector
Add a blank line between rule blocks for visual separation
Order properties logically: positioning → box model → typography → visual

Frequently Asked Questions

A formatter only changes the whitespace and structure of your CSS — it never alters property values or rules. A linter (like Stylelint) also checks for errors, deprecated properties, specificity issues, and coding conventions. Use both for production CSS.

Yes. CSS custom properties like --primary-color: #0A6CFF; are treated as regular properties and formatted correctly.

Yes, the CSS minifier strips all comments and whitespace. If you want to preserve licence comments (/* ! ... */), use a dedicated minifier like cssnano that supports comment preservation flags.

Done!