IZN Tools

CSS Formatter

One declaration per line, sorted the way you prefer.

INPUT
OUTPUT
Waiting for input
Computed on this device

What formatting settles

Most CSS argument is about layout of the text: whether a space follows the colon, whether a single declaration goes on one line, where the closing brace sits. A formatter answers all of it the same way every time, which removes the argument rather than winning it.

What it will not do

  • Reorder properties. In CSS order is meaning. margin followed by margin-top is not the same as the reverse.
  • Merge or remove rules. Two rules with the same selector may be separated by a third that matters.
  • Rename anything. Class names, custom properties and values come out exactly as they went in.

Those are optimiser jobs, and an optimiser needs to understand the cascade. A formatter that guessed at them would occasionally break a page.

Reading someone else's stylesheet

Minified CSS is still valid CSS. Pasting a vendor bundle here and formatting it is the quickest way to find out what a third-party widget is actually doing to your layout.

Questions

Does formatting change what the stylesheet does?+

No. Whitespace between declarations is insignificant in CSS, and nothing is reordered or renamed — selectors, properties and values come out identical. Only the layout of the text changes.

Will it sort my properties alphabetically?+

No, and deliberately. Property order matters in CSS: a shorthand followed by a longhand overrides it, and reordering silently changes the result. Sorting is a job for a linter with knowledge of that, not a formatter.

Does it handle SCSS and Less?+

Prettier's postcss parser accepts nested syntax, so both format correctly, including nesting and variables.

What about minified CSS I want to read?+

Paste it — a minified stylesheet is valid CSS and comes back readable. That is the fastest way to understand a vendor file you did not write.