CSS Formatter
Two-way CSS beautify and minify: one declaration per line, tidy nesting; minify keeps /*! comments and collapses zero units without reordering selectors.
>_ USAGE GUIDE
Beautify and minify in both directions: beautifying produces readable styles with one declaration per line and tidy nesting; minifying strips whitespace, **preserves /*! copyright comments**, collapses zero-value units (0px becomes 0), and leaves selector order untouched — the minified stylesheet renders exactly like the original.
- Paste the CSS: from a live site, a build artifact, or your own stylesheet
- Beautify or minify: expand for reading and editing, compress for shipping
- Copy the output: formatted for review, minified for deployment
Typical workflow: a production stylesheet arrives as one line — beautify it to make an edit; after editing, minify it back before publishing; CSS scraped from someone else's site gets formatted before anyone tries to read it. Because beautify preserves order, the expanded output can go straight into version control as a readable baseline, and future diffs stay meaningful instead of drowning in whitespace noise. Processing is local — style code never leaves your machine.
>_ FAQ
Q1 · Does minifying CSS change how the page renders?
Not here — the tool performs equivalence-preserving transformations only: whitespace removal and zero-unit collapsing (0px and 0 are identical), with selector order and value semantics fully intact. Boundaries worth knowing: /*! important comments survive (they carry licensing text), ordinary comments are removed, and the contents of content property strings are preserved verbatim.
Q2 · How much smaller does minification make a CSS file?
It depends how tidy the source was: hand-written CSS typically shrinks 20–40%; an already-compact file gains little. The real bulk of CSS is usually duplicated rules and redundant selectors, which minification does not touch — going further requires refactoring (merging duplicate rules, deleting unused styles), a different kind of optimization.
Q3 · Why did the order of rules change after using some formatter?
This tool preserves selector order exactly, because order affects the cascade — reordering equal-specificity rules changes which style wins and can silently alter rendering. If another tool reordered your CSS, be suspicious. That risk is precisely why this formatter is conservative about order.
Q4 · Can minified CSS be expanded back?
Yes — that is the point of the two-way design. Paste the one-line production CSS, click beautify, and it unfolds into readable form. Minification is reversible in a way compiled JavaScript is not: nothing was transformed, only whitespace deleted.
Q5 · Can it handle Sass or Less source?
Not directly — variables, nesting, and mixins in .scss/.less are preprocessor syntax that must be compiled to CSS first. This tool targets compiled, standard CSS. The correct workflow mirrors your build: Sass compiles, the output CSS lands here for formatting or minification.