CSS minifier
Processed in your browser · nothing is uploaded
Removes comments and every unnecessary space, and drops the semicolon before each closing brace. Values and selector order are left exactly as they are.
How to use the css minifier
The safe transformations are the boring ones, and they are most of the win: whitespace around braces, colons and commas is never significant, comments never affect rendering, and the last semicolon in a block is optional.
Everything beyond that requires understanding the cascade, so it is not attempted. Merging .a{color:red} and .a{padding:0} looks obviously safe and is not, because something declared between them may override one of the two. Nothing here is merged, reordered, renamed or shortened, which is what makes the output predictable.
There are two places where whitespace turns out not to be decoration, and both are worth a check on a large stylesheet. Inside calc() the spaces around + and − are part of the grammar: calc(100% + 10px) minifies to calc(100%+10px), which is invalid and dropped by the browser. And a descendant selector ending in a pseudo-class loses its space. .a :hover becomes .a:hover, which is a different selector entirely. The second shape is rare; the first is not.
On whether to bother: over gzip the extra saving is a few percent, so it belongs in a build step rather than in your attention. Older CSS hacks that depend on exact whitespace can also break, though there are few of those left to worry about.
Questions
Comments, unnecessary whitespace, and the semicolon before each closing brace. Nothing else.
Because a rule between them may override one, and merging changes which declaration wins.
It can. calc(100% + 10px) becomes calc(100%+10px), and the browser drops that; the spaces around + and − are required. Check any calc that adds or subtracts.
One shape: a descendant selector ending in a pseudo-class. `.a :hover` loses its space and becomes `.a:hover`, which matches something else. Rare, but worth knowing.
Older hacks relying on specific whitespace can break. They are rare now, but check if you use them.
The extra saving is small. Worth doing in a build, not worth agonising over.
No.