Delete whitespace carelessly and CSS breaks
"Just strip the comments and the spaces" sounds right until you remember that CSS has places where whitespace is the syntax. Two accidents that regex-based minifiers cause regularly:
| Original | Bad minification | Result |
|---|---|---|
calc(100% - 2rem) | calc(100%-2rem) | The expression is ignored and the value is invalid |
.list > :first-child | .list>:first-child | It now matches a different element |
url(my file.png) | url(myfile.png) | Points at a file that does not exist |
This tool walks the input one character at a time while tracking whether it is inside a string, a comment, parentheses or braces. Inside parentheses it keeps the spaces around operators; in selectors it keeps the descendant combinator; and it never touches the space before a colon.
What gets removed
- Comments — except licence banners that start with
/*! - Whitespace and line breaks that carry no meaning
- The semicolon after the last declaration in a block
- Rules with no declarations at all
- Optionally:
#aabbcc→#abc,0.5em→.5em
Units are left alone. Rewriting 0px as 0 is a popular optimisation,
but there are places — transition, flex-basis — that need the unit, so
it was deliberately left out. This tool does only what is certainly safe.
How much smaller?
Hand-written CSS with plenty of comments and deep indentation usually drops 20–35%. CSS that has already been through a build tool barely moves. The before and after sizes appear under the output box.
If you serve with gzip or brotli, though, the difference on the wire is far smaller than that, because repeated whitespace is exactly what those compress best.
Can minified CSS be unfolded again?
CSS Formatter restores the indentation. The comments are already gone, so those do not come back.
Does it handle SCSS or LESS?
Nesting and variables are not supported. Feed it compiled CSS.