CSS Beautifier
Format CSS with consistent indentation and one property per line, using Prettier. Browser-only.
0 characters
0 characters
About CSS Beautifier
The CSS beautifier reflows minified or inconsistently formatted CSS into a readable form using Prettier's PostCSS-backed formatter. The result follows Prettier's house style: one property per line, 2-space indentation, lowercase property names, and double quotes around URLs and strings.
When to use it
- Reading a minified stylesheet pulled from production
- Cleaning up CSS copied from a designer's prototype
- Standardizing the formatting of a CSS file before checking it in
- Reformatting hand-written CSS that grew inconsistent over time
How it works
Prettier's PostCSS parser builds an AST that captures rules, selectors, properties, and at-rules. The formatter re-prints the AST with consistent indentation and spacing, breaking long selector lists and value lists onto multiple lines where appropriate. Comments are preserved at the AST node they were attached to.
Examples
Minified → formatted with media queries
.button{background:#fff;color:#000;padding:0.5em 1em}@media (min-width:600px){.button{padding:1em}}.button {
background: #fff;
color: #000;
padding: 0.5em 1em;
}
@media (min-width: 600px) {
.button {
padding: 1em;
}
}
Frequently asked questions
- Does it support SCSS, Less, or PostCSS plugins?
- The default parser handles standard CSS. SCSS and Less syntax may require switching parsers — for those, integrate Prettier directly into your build with the appropriate parser option.
- Are CSS custom properties preserved?
- Yes. CSS variables (--name) and var() references are preserved verbatim.
- Can I customize indentation or quote style?
- Output uses Prettier defaults (2-space indent, double quotes). For project-wide customization, use Prettier in your repository with a .prettierrc file.
- Is my CSS uploaded?
- No. Prettier runs in your browser. About 2 MB of Prettier code is lazy-loaded on first use.