CSS Minifier and Beautifier

About the CSS Minifier and Beautifier

Minifying CSS makes the file smaller so pages load faster. The minifier removes comments, collapses runs of whitespace, drops the space around braces, semicolons, commas and the combinators greater than, plus and tilde, removes the space after a colon in declarations, deletes the final semicolon in each block and shortens numbers such as 0.5 to .5. It is careful about the places where whitespace matters. Spaces inside strings and unquoted url() values are kept exactly. Inside calc() the spaces around plus and minus are kept, because calc(1px+2px) is invalid CSS. A descendant selector such as .card :hover has a space that changes its meaning, so it stays, while .card > .body loses the spaces around the combinator. The tool does not rename classes, merge rules, shorten colours or remove units, so the page renders the same. The beautifier is the reverse: it puts each selector of a list on its own line, each declaration on its own line, indents nested blocks and at-rules, and adds the space after each colon and comma. Running the minifier twice changes nothing, and beautifying then minifying gives the same result as minifying directly. Savings depend on how much whitespace and commenting the original had, and compression with gzip or Brotli on the server shrinks the file further. The beautifier and minifier handle nested rules and custom properties.