Reading a minified stylesheet
The style.min.css you pulled off a deployed site has tens of thousands of
characters on one line and cannot be read as it stands. Paste it here and each rule gets its own
lines and indentation.
Useful when you are tracing where a particular style on someone else's site comes from, or when you have inherited the CSS of an old project.
Options
| Option | What it does |
|---|---|
| One line per selector | Splits h1, h2, h3 { across three lines. Easier on rules with long selector lists |
| Blank line between rules | Puts a blank line between rules. Reads better when there are not many |
Comments do not come back
Formatting only restores indentation and line breaks. Comments deleted during minification,
and the blank lines the original author left, cannot be recovered. If a source map
(.css.map) was published alongside, that will get you much closer to the original.
About this formatter
It runs js-beautify (MIT) inside your browser — the same engine beautifier.io uses. Your input is not sent to a server.
Does it format SCSS?
Nested SCSS and LESS mostly come out fine. The engine works to CSS syntax, though, so complex mixins and control directives can look awkward.
Will it sort properties alphabetically?
No. Declaration order carries meaning in CSS — write the same property twice and the later one wins. Reordering could change the result, so it is left alone.