CSS Beautifier

What this tool does

It takes minified, badly indented or simply inherited CSS and hands it back readable: one declaration per line, consistent indentation and separated blocks. It supports CSS, SCSS and Less, and all the work happens in your browser.

It is the exact inverse of the CSS minifier: one prepares the file for production, this one prepares it for a human to understand.

What comes back and what does not

Worth being clear about, because there is a common expectation that cannot be met.

Restored: indentation, line breaks, spacing around colons and braces, one selector per line when there are several, and readable rule order.

Not restored: comments, which the minifier deleted and are nowhere in the file. Nor the original names if the process included class obfuscation — as some bespoke CSS tooling does — because .a1b2 is all that is left in the file.

Put another way: you recover the structure, not the original. And the structure is enough to read, debug and modify the sheet.

When you actually need this

• Auditing a production site’s CSS, yours or someone else’s, when all you have is the final bundle.
• Recovering a stylesheet whose source was lost and only the deployed version survives.
• Unifying the style of a file five people have touched with five different editor configs.
• Reviewing an impossible diff where someone committed minified CSS and the change shows up as a single twenty-thousand-character line.

SCSS and Less are not CSS

Picking the right dialect above is not cosmetic. The plain CSS parser does not understand nesting, mixins, @extend or variables with $ and @, so it would reject a perfectly valid SCSS file as a syntax error.

If your file has preprocessor nesting or variables, select SCSS or Less and it will work.

The most frequent syntax errors

Formatting requires parsing first, so a file that cannot be parsed cannot be formatted. The three cases that come up again and again:

1. An unclosed brace. The error usually points far below the real spot, because the parser keeps swallowing rules until something becomes impossible. Start searching from the reported line upwards.
2. An extra semicolon right before the closing brace in some nested constructs.
3. A half-finished copy and paste that leaves the file cut in two. It sounds silly, and it is the most common cause.

The tool gives you line and column, which is what saves the time.

About the formatter

It uses Prettier (MIT licence) compiled for the browser. It is opinionated on purpose: it offers almost no options because its value lies in two people getting the same result. What you can adjust here is the indentation — two spaces, four, or tabs — and the maximum line width.