What the CSS formatter does
Three operations on a stylesheet: beautify a minified or messy file into consistently indented, one-declaration-per-line CSS; minify it by stripping comments and whitespace for production; and validate it, reporting unbalanced braces, missing semicolons and malformed declarations with line numbers. Everything runs in your browser, so stylesheets from private projects stay on your machine.
Beautify: before and after
Before (minified):
.card{display:flex;gap:12px;padding:16px}.card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}@media(max-width:640px){.card{flex-direction:column}}
After:
.card {
display: flex;
gap: 12px;
padding: 16px;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@media (max-width: 640px) {
.card {
flex-direction: column;
}
}What each mode changes
| Mode | Changes | Keeps |
|---|---|---|
| Beautify | Indentation (2 spaces), line breaks, spacing around colons and braces, one declaration per line, blank line between rules | Selector text, property order, values, comments, vendor prefixes |
| Minify | Removes comments, whitespace, final semicolons in blocks; collapses spaces in values | Every rule and declaration — the output is functionally identical |
| Validate | Nothing — reports issues only |
Neither beautify nor minify changes what the CSS does. They do not reorder properties, merge selectors, remove unused rules or rewrite values — those are optimisation tasks for tools like cssnano or PurgeCSS in a build pipeline.
What the validator catches
- Unbalanced
{and}— the most common cause of “everything after line N stopped working”. - Missing semicolons between declarations (the last one in a block is optional).
- Declarations without a colon, or with an empty value.
- Unclosed comments (
/*without*/), which silently swallow the rest of the file. - Unclosed strings and
url()parentheses.
It checks syntax, not semantics: colr: red is syntactically fine and will pass, as will a valid property with a value the browser does not understand. For property and value checking, use the W3C CSS Validator or a linter such as Stylelint.
When to minify
Minification saves 15–30% on typical CSS before gzip and a few percent after — modest, because gzip already removes most whitespace redundancy. It is still standard practice in production builds, mainly to strip comments (which can contain internal notes) and to shave bytes on the critical path. Keep the formatted source in version control and generate minified output in the build; never edit minified files.
Common uses
- Reading a third-party or legacy stylesheet that shipped minified.
- Cleaning up CSS pasted from a CMS, an email template or a browser's computed styles.
- Finding the missing brace that broke a page.
- Producing a minified snippet to inline in a
<style>tag or an HTML email. - Normalising formatting before a code review so the diff shows only real changes.