toolspace

CSS beautifier

Beautify CSS with Prettier, one declaration per line, or switch to Minify for a single compact line ready to ship. SCSS nesting and variables are understood, and syntax errors are reported with their line.

Loading…

Worked example

Minify mode on a small rule set. The spaces inside calc() and before :focus-visible are kept on purpose.

css
/* buttons */
.btn {
  padding: 8px 12px;
  width: calc(100% - 16px);
}

.toolbar :focus-visible {
  outline: 2px solid currentColor;
}
minified
.btn{padding:8px 12px;width:calc(100% - 16px)}.toolbar :focus-visible{outline:2px solid currentColor}

“.toolbar :focus-visible” (any focused element inside the toolbar) and “.toolbar:focus-visible” (the toolbar itself) are different selectors, so that space stays.

Common mistakes

  • Minifying the only copy

    Keep the readable file as your source and minify when you publish. Editing minified CSS by hand is slow and error-prone.

  • Removing spaces in calc() by hand

    calc(100%-16px) is invalid: + and - need a space on both sides. The minifier keeps them.

  • One missing closing brace

    A block left open swallows every rule after it, so styles break far from the real mistake. The formatter points to where the block began.

  • An accidental space before a pseudo-class

    “.btn :hover” styles hovered elements inside the button, not the hovered button. Formatting keeps that space, so check it when a hover style seems ignored.

How it works

  1. 1

    Paste your stylesheet

    Minified CSS from a site, a messy file, or SCSS. Open or drop a .css or .scss file to read it locally.

  2. 2

    Format or minify

    Format indents rules and puts each declaration on its own line. Minify removes comments and every space that doesn’t matter.

  3. 3

    Compare the size

    The status line shows the size before and after minifying, so you can see what you saved.

Questions

What exactly does Minify remove?
Comments (except /*! … */ licence comments), line breaks, indentation, spaces around braces, semicolons, commas and selector combinators (> + ~), spaces after colons, and the last semicolon in each block. Strings, url() values and the spaces around + and - inside calc() stay, because removing them would change or break the CSS.
Does minifying shorten colors or merge rules?
No. It only removes whitespace and comments, so the result behaves exactly like the original. Optimizers such as cssnano or Lightning CSS go further, with more risk.
Does it validate my CSS?
It catches syntax errors, like a block that is never closed, and shows the line. It doesn’t check whether property names or values exist.
Does it work with SCSS?
Yes. The SCSS parser also reads plain CSS, so nesting, $variables, @mixin and @include format as expected.