A CSS formatter for minified stylesheets
Minified CSS from a CDN or a production build is compact but unreadable. This CSS formatter, built on js-beautify's CSS beautifier, expands it back into a conventional layout: each selector on its own line, one declaration per line, and nested at-rules indented. It is tolerant of unusual input, so vendor hacks, custom properties and unknown at-rules pass through unchanged.
Example
a,button{color:#333;transition:color .2s ease}a:hover,button:focus-visible{color:#0f766e}@media (prefers-color-scheme:dark){a{color:#ddd}}a,
button {
color: #333;
transition: color .2s ease
}
a:hover,
button:focus-visible {
color: #0f766e
}
@media (prefers-color-scheme:dark) {
a {
color: #ddd
}
}The example uses a 4-space indent. Selector lists are split at commas, a space follows each colon, and rules are separated by blank lines. As with all js-beautify output, the formatter only changes whitespace: it does not add the final semicolon that minifiers remove, does not add the leading zero to .2s, and does not add a space inside the media query. Your values arrive exactly as written.
Options
- Indent – 2 spaces (default), 3, 4, 8 or tabs.
- Blank line between rules – on by default. Turn it off for a denser file where each rule directly follows the previous one; this is handy for short utility stylesheets.
- Minify – removes whitespace and comments to produce a single line. For structural optimizations such as merging duplicate rules and shortening colors, use the CSS Minifier.
Common CSS conventions
Most CSS style guides agree on the basics this formatter applies: one selector per line in a list, one declaration per line, a space after the colon, and an opening brace on the selector's line. A few conventions go beyond whitespace and are worth adopting by hand:
- End every declaration with a semicolon, including the last one, so adding a line later cannot break the rule.
- Write lowercase hex colors and keep units off zero values (
margin: 0). - Group related properties: positioning, box model, typography, visual effects.
- Keep specificity low; prefer a class over
#idor chained selectors.
If you want semicolons, leading zeros and lowercase colors applied automatically, CSS Pretty Print runs Prettier, which normalizes those details.
Common CSS errors this makes visible
- A missing closing brace makes every following rule indent one level too deep. The point where the indentation drifts is where the brace is missing.
- A missing semicolon joins two declarations into one invalid value, e.g.
color: red background: blue; after formatting they appear on one line where you would expect two. - Unclosed comments swallow the rest of the file into a comment.
For a precise report with line numbers and warnings about unknown properties and invalid values, check the file with the CSS Validator.
Reading CSS from a live site
If a site ships source maps (a /*# sourceMappingURL=... */ comment at the end of the file), your browser's developer tools can show the original source files. Many production sites do not publish them, and then formatting is the quickest way to read the rules. Load URL fetches a stylesheet by its address, and Beautify turns it into something you can search, copy from and compare with your own styles.
Preprocessor files
The beautifier handles plain CSS best. SCSS and LESS files with nesting, mixins and variables are better served by the SCSS Formatter or the LESS formatter, which understand the preprocessor syntax. Everything runs locally in your browser.