Why Minify CSS, and Why a Whitespace Regex Is the Wrong Way to Do It

Minifying CSS is worth doing because a stylesheet in the page's head blocks rendering: the browser shows nothing until it has downloaded and parsed it. Comments, indentation and line breaks help the person who writes the file and do nothing for the browser that reads it. Removing them is safe only if the tool knows where CSS syntax ends and literal text begins, and that is exactly the part a quick regex gets wrong.

What a minifier is allowed to remove

Three things in a hand-written stylesheet carry no meaning for the browser. Comments. Whitespace next to punctuation, so .card { color: red; } means the same as .card{color:red}. And the last semicolon in a block, because a semicolon separates declarations and the closing brace already ends the final one.

Everything else has to stay. A space between two values is a separator: margin: 0 auto is two values, margin:0auto is one invalid one. A space between two selectors is a combinator: .card .title matches a title inside a card, .card.title matches one element with both classes. A minifier that collapses every space it sees changes what the CSS means.

Where find-and-replace breaks real CSS

The usual shortcut is a regular expression that squeezes whitespace and deletes anything between /* and */. It works on a demo file and fails on real ones, in three places.

Strings. content: "a b" has two spaces on purpose, and url("x?a=1 b=2") is an address, not CSS. A regex has no idea it is inside quotes. It squeezes them anyway, or worse, treats a /* inside a URL as the start of a comment and deletes half the file.

Math. Inside calc(), the CSS spec requires whitespace on both sides of + and -. calc(100% - 4px) is valid. calc(100%-4px) is not, and the browser drops the whole declaration without an error. A minifier that strips spaces around every + because .a + .b can safely become .a+.b will break every calc that adds two things.

Selectors. a :hover and a:hover are different selectors. Removing the space before a colon is fine inside a declaration block and wrong in a selector.

None of these fail loudly. The page still loads, and something is just a little off in a layout you might not check for weeks.

What a tokenizer does differently

A tokenizer reads the stylesheet one character at a time and always knows whether it is inside a comment, a quoted string, a url(...), or plain CSS. Only plain CSS gets its spacing changed. That is how the CSS minifier on this site works: strings and url() values come out byte for byte, a calc keeps one space either side of its plus and minus, and a space before a colon is only removed inside a block.

What this tool does not try to do

It does not rewrite values. #ffffff stays #ffffff, 0px stays 0px, and two rules with the same selector are not merged. Build-time optimisers do those things and carry the risk that comes with changing values. This one only removes what has no meaning, which is a smaller saving and one you never have to double-check.

If you want to try it on your own stylesheet, the how-to guide walks through the steps and the two options. If you are going the other way, with a minified file you need to read, see how to beautify minified CSS to debug it.