Developer Formatting

CSS formatter

What to do
Indent

Processed in your browser · nothing is uploaded

Local · formatting only, values untouched
Advertisement
320 × 100

Puts each declaration on its own line and indents nested blocks, or strips it all back out. Minifying also removes comments and the final semicolon in each block.

How to use the css formatter

1 Paste the CSS and choose an indent.
2 Format puts one declaration per line and indents by brace depth.
3 Minify strips it all back out, comments and the final semicolon included.
4 Copy the result, or save it as a file.

Dropping the last semicolon is safe and is what every minifier does: CSS needs a semicolon between declarations, not after the last one. Two things this deliberately does not do, because both change behaviour: it does not merge duplicate selectors, since the cascade means order matters and merging can change which rule wins, and it does not shorten colours or units.

That restraint is the point of a formatter. Nothing is reordered, so the cascade after formatting is identical to the cascade before it, and a reviewer reading the tidied file is reading the same stylesheet. A tool that rewrites values to save bytes is a different kind of tool, with a different kind of risk, and gzip recovers most of what it would have won.

One thing to check after minifying: whitespace inside calc() is part of the syntax, not decoration. calc(100% + 10px) needs the spaces around the +, and stripping them gives calc(100%+10px), which is invalid and simply dropped by the browser. Any calc that adds or subtracts is worth a look before you ship the minified file.

Formatting is not linting either. It indents by brace depth and reports nothing: a misspelled property, an invalid colour and an unbalanced brace all pass through it. The unbalanced brace at least announces itself, as everything below it indented one level too deep.

Questions

Yes. CSS needs semicolons between declarations, not after the last one in a block.

MDN, CSS reference
Advertisement
300 × 250
Was this tool any good?
Internal signal only · I use it to find the tools worth rebuilding