How to Beautify Minified CSS So You Can Debug It

When a style on a live site is wrong and the only copy of the CSS is the minified one the server sends, paste it into the CSS minifier and switch the mode to Beautify. You get one declaration per line, indented by nesting depth, with every selector in a list on its own line. That is enough to search, read and diff, which a single line of several thousand characters is not.

Where minified CSS comes from

You usually meet it in one of three ways: a <style> block or linked file opened from view-source, the output of a build step you did not write, or a theme or plugin that only ships its minified file. Browser developer tools can pretty-print a stylesheet too, and for a quick look that is fine. A beautified copy you can paste into an editor is better when you need to search across the whole file, compare two versions, or keep it next to your own CSS while you work out which rule wins.

Beautifying it, step by step

1. Copy the minified CSS from the source or the network panel and paste it into the box.
2. Choose Beautify. An Indent choice appears: 2 spaces, 4 spaces or a tab. Pick whatever your editor uses so a diff against your own files stays clean.
3. Read the result in the page, copy it, or download it as formatted.css.

The read-out under the result tells you how many lines you got and how many comments were kept. Beautify keeps every comment that is still in the file and starts a new line after each one.

Finding the rule that overrides yours

With one declaration per line, a plain text search does the work. Search for the property you are fighting, say z-index or max-width, and every rule that sets it shows up with its selector a few lines above. Top-level selector lists are split one per line, so a selector buried in the middle of a long group is easy to see. Child, sibling and adjacent combinators come out with a space on each side, .nav > li rather than .nav>li, which makes it easier to tell what a long selector actually targets.

Nested blocks such as @media indent one level deeper than the rules around them, so you can see at a glance whether the rule you found only applies at one screen width.

What beautifying cannot give back

Beautify reformats what is there. It does not restore anything the minifier upstream removed. Comments that were stripped are gone, and so are the original line breaks and the author's grouping of rules. If a build tool also renamed classes or merged rules, the beautified file shows the merged version, not the source.

It also will not fix broken CSS. If the braces do not balance, for example because the paste got cut off, the tool still shows its best attempt with a note saying the braces look unbalanced, and the indentation after that point will be off. Copy the file again in full before you trust the structure.

Once you have found and fixed the rule in your own source, minify your version with the how-to guide's steps. For why the minifier leaves strings and calc() spacing alone, see why a regex breaks CSS.