There are three places whitespace is significant in CSS, and each is a way a stylesheet gets broken.
A bare space is the descendant combinator. .a .b matches a .b inside an .a; .a.b matches an element with both classes. Removing that space changes which elements the rule hits.
Inside quotes, content: "a b" renders two spaces on the page.
And in calc() the space is required: calc(100% - 20px) is valid and calc(100%-20px) is not, because -20px would read as a signed length rather than a subtraction.
Nothing is merged or reordered. The cascade depends on order.
Because it is a different order of problem. Minifying JavaScript needs a real parser — scope analysis, automatic semicolon insertion, telling a regular expression from a division — and getting it 95% right silently corrupts somebody’s script. CSS has no equivalent traps: the grammar is flat, whitespace is insignificant outside a few well-defined places, and every transformation here is local.
Because a bare space is the descendant combinator, and it means something. “.a .b” matches a .b inside an .a; “.a.b” matches an element carrying both classes. Collapsing that space changes which elements the rule applies to — it is the single most damaging thing a careless CSS minifier does. Spaces around >, + and ~ are removed, because those combinators are explicit.
Because they are required. calc(100% - 20px) is valid and calc(100%-20px) is not — without the space, -20px reads as a signed length rather than a subtraction, and the whole declaration is dropped by the browser. The same applies inside clamp, min and max.
Not if it begins with /*! — that form is the long-standing convention for a comment that must survive minification, and every minifier honours it. It is the one deletion here with legal consequences, so it is kept by default and the page tells you when it kept one. Ordinary /* comments are removed.
No, deliberately. The cascade depends on order — two rules with the same selector are applied in sequence, and later declarations win. A minifier that merges or reorders is rewriting your stylesheet rather than shrinking it, and the extra saving is not worth the class of bug it introduces.
Left exactly as it is, spaces and all. content: "a b" renders two spaces, so squeezing whitespace inside a string changes what appears on the page. Hex colours inside strings are not shortened either, for the same reason.
Minifying JavaScript needs a real parser — scope analysis, automatic semicolon insertion, telling a regex from a division. Getting that 95% right silently corrupts a script. CSS has no equivalent traps.
Runs entirely in your browser; nothing is transmitted. Nothing is reordered or merged — the cascade depends on order. Licence comments beginning with an exclamation mark are kept by default. Nothing you type here is sent to our servers — the calculation runs entirely in your browser.
