CSS Formatter

A CSS formatter takes a CSS string and re-emits it with consistent whitespace, indentation, and (sometimes) declaration order. The tool above runs the formatter in your browser; nothing leaves your machine. The interesting question is what’s actually being normalized — much of CSS “style” is convention, and a formatter has to pick conventions.

What’s syntactically required vs stylistic

CSS has very few syntactic whitespace rules:

• Selectors must be separated from { by at least one whitespace character (space, tab, newline). div{...} is invalid; div {...} is valid. Most formatters always put a space before {.
• Declarations end with ;, except optionally the last one before }. Most formatters always add the trailing ; for consistency.
• Whitespace inside values is significant in some places — 1 px is invalid (the unit must be attached); linear-gradient(red, blue) requires the comma between args; font-family: "Open Sans" doesn’t strictly need quotes if the name is a single identifier.

Everything else — indentation, line breaks, declaration ordering, quote style — is stylistic. Different style guides choose differently.

What a formatter typically normalizes

The tool above applies these defaults. Override them in a project-specific config (Prettier, Stylelint, EditorConfig) if you have one.

What a formatter typically does not do

• Re-order declarations. color: red; background: blue; and background: blue; color: red; are functionally identical, but a formatter usually preserves the author’s order. Some tools (Stylelint with a property-order plugin) enforce a specific order, but pure formatters don’t.
• Combine duplicate selectors. .foo { color: red; } .foo { background: blue; } and .foo { color: red; background: blue; } produce the same output, but a formatter doesn’t merge them.
• Remove unused rules. That’s PurgeCSS territory.
• Optimize values. A formatter doesn’t know that 0px is equivalent to 0 (or that 0 should sometimes stay as 0px for clarity); it preserves what the author wrote.
• Validate. A formatter parses the CSS as far as needed to format it. It’ll typically fail on invalid syntax but not catch logical errors (color: blu parses as a custom keyword, not a typo).

Formatter vs minifier

Formatter and minifier are inverses:

• Formatter: maximize readability — line breaks, indentation, consistent style. Output is human-readable.
• Minifier: minimize size — strip whitespace, shorten color codes, remove last ;. Output is parseable but unreadable.

A formatted CSS file might be 5 KB. The same file minified is ~3.5 KB. For development, format. For production, minify after formatting (most build tools do this automatically). See CSS minifier for the inverse direction.

CSS, SCSS, Less, PostCSS

Formatters operate on CSS syntax. SCSS, Less, and PostCSS-flavored CSS extend it with nesting, variables, mixins. A pure-CSS formatter may handle these correctly (SCSS-aware mode) or may break on them (treating nested selectors as syntax errors).

The tool above formats standard CSS. For SCSS or Less, use a preprocessor-aware formatter like Prettier with the appropriate parser.

CSS itself has gained nesting in CSS Nesting Module Level 1 — same syntax SCSS popularized. Modern CSS formatters handle this natively.

Common pitfalls

• Formatting auto-generated CSS. Build-tool-generated CSS (from CSS-in-JS libraries, from CSS Modules, from atomic/utility-class generators) often isn’t intended to be human-read. Formatting it adds bytes without adding value. Don’t format the output of build tools.
• Formatting inside HTML. A <style> block inside HTML has the surrounding HTML indentation; whether the formatter preserves it depends on the formatter. Mixed-language formatters (Prettier) handle this; CSS-only formatters typically don’t.
• Mixing CSS and SCSS in one file. A .css file with SCSS syntax is a mismatch. Most CSS formatters either fail or produce incorrect output. Pick one and stick with it.
• Idempotence. Format a file twice; the second result should be identical to the first. If a formatter’s output isn’t idempotent, the tool has a bug — easy to catch by piping a file through it twice and diffing.

For the inverse direction, see CSS minifier. For other format conversions, see JSON formatter, HTML formatter, SQL formatter.