Minify CSS safely

What gets removed

This minifier is deliberately limited to things that cannot change how the CSS behaves.

• Comments, except the license comments that start with /*! if you keep them.
• Spaces, tabs and line breaks at the start and end of the text and between rules.
• White space around {, }, ; and ,, after (, [ and :, and before ) and ].
• White space around the > and ~ combinators in selectors.
• Optionally, the last semicolon before a closing brace. a{color:red;} becomes a{color:red}. This is the only character removed that is not white space or a comment.

What is deliberately left alone

• The space before a colon in a selector. a :hover and a:hover select different things, so it stays.
• Spaces around +, -, * and /. Inside calc() they are required, and + is also a selector combinator, so a space is never removed there. A run of spaces becomes one.
• Strings and url(). Their contents are copied exactly, including semicolons and braces inside them.
• Custom properties. The value of --name: ... is copied as written, because scripts can read it back with getPropertyValue.
• A comment between two parts of one word. It stays rather than joining the parts.
• Escapes. A backslash and the character after it are kept together.

What this minifier does not do

It does not shorten colors (#ffffff to #fff), drop units from zero, merge rules, remove unused CSS, add vendor prefixes, or inline @import. A full CSS optimizer in your build tool does those and saves more, with more risk. What you save here depends on how much white space and how many comments the file has. A well commented, indented stylesheet shrinks a lot. A file that is already compact barely changes.

It also does not minify SCSS or Less. A // line comment is not a CSS comment, so it would join the next rule. Compile to CSS first, then minify the result.

Using minified CSS safely

• Keep the formatted file as your source and treat the minified file as a build output.
• Serve it with gzip or Brotli compression. Compression removes much of the cost of white space on the network, so minifying matters most where text is stored or sent without compression.
• Test the page after you switch. Because only white space and comments change, differences should not appear. If one does, keep your original file and compare the two.
• Need to read minified CSS again? Paste it into the CSS formatter. Removed comments cannot be restored.