CSS Beautifier

You are looking at a production stylesheet that arrived as a single 60,000-character line, and you need to find one rule. Beautifying it puts each declaration on its own line and makes the thing navigable.

Formatting CSS

1. Paste the minified or badly formatted CSS.
2. Pick your indentation preference.
3. Format it.
4. Search the readable output for the selector you need.
5. Copy what you need back into your source files.

Why you would need to expand CSS

• Investigating how a third-party theme or plugin achieves an effect.
• Finding the rule responsible for a layout bug in production code.
• Recovering readable source when the original was lost.
• Reviewing a stylesheet before adopting it into your project.
• Making a git diff meaningful when a minified file was committed.

Specificity is easier to see when it is formatted

Once the CSS is indented you can actually scan the selectors, and selector specificity is where most stubborn styling bugs live. A rule that refuses to apply is nearly always losing to something more specific elsewhere in the cascade.

Reading a formatted stylesheet makes the offenders obvious: long descendant chains, IDs used for styling, and stacks of !important declarations fighting each other. Those patterns are invisible in a minified blob.

What to check once it is readable

• Duplicate selectors defining the same property twice with different values.
• Stacked !important declarations, which usually mean the cascade has been lost.
• IDs used as styling hooks, which are almost impossible to override later.
• Deeply nested descendant selectors that are fragile to any markup change.
• Vendor prefixes for browsers that stopped needing them years ago.

Formatting is not the same as fixing

A beautifier normalises whitespace. It will not remove duplicate rules, resolve conflicting declarations or tell you which of your 4,000 selectors are unused. For those, a linter such as Stylelint and a coverage report from browser devtools will get you much further.

CSS formatting questions