CSS Minifier
- 165
- Bytes in
- 122
- Bytes out
- 43
- Saved
- 26.1%
- Reduction
Gzip does most of this already
A server compressing CSS with gzip or Brotli recovers most of what minification saves, because repeated whitespace compresses to almost nothing. Minify as well, not instead, and measure the compressed size, not the raw one.
The minifier removes comments, indentation and every space CSS does not need, and reports how many bytes that saved. It walks the stylesheet character by character rather than applying regular expressions, which is what keeps a comment marker inside a url() or a quoted string from destroying the file.
How it works
- Comments are removed, except those beginning /*!, the convention for a licence header that must survive minification.
- Whitespace is removed entirely next to braces, colons, semicolons and combinators, and collapsed to a single space elsewhere. That distinction matters: a space between two selectors is the descendant combinator and means something.
- The final semicolon before a closing brace is dropped, since it separates declarations and the last one has nothing to separate.
- Quoted strings and url() values pass through untouched, including any comment-like text inside them.
Nothing semantic is changed. Colours are not shortened, shorthand properties are not merged, and duplicate rules are not removed. Those transformations need to understand the cascade, and getting them wrong changes how the page looks. This only removes characters the parser ignores.
Examples
A small stylesheet
CSS
Two rules with comments and indentation
Result
Around half the original bytes
Most of a hand-written stylesheet is indentation and line breaks. The saving shrinks considerably once the file is also gzipped.
A descendant combinator
Selector
.card .title
Result
.card .title. The space is kept
Removing that space gives .card.title, which matches an element with both classes rather than a descendant. It is a different selector entirely.
A licence header
CSS
/*! theme v2 */
Result
Kept
The exclamation mark is the long-standing signal to minifiers that a comment is legally required and must not be stripped.
Frequently asked questions
Does minifying CSS meaningfully improve page speed?
Less than the byte count suggests. Servers compress CSS with gzip or Brotli, and repeated whitespace compresses to almost nothing, so the compressed saving is a fraction of the raw one. It is still worth doing. It costs nothing, but judge it on the compressed size.
Why is a space kept between two class names?
Because it is the descendant combinator. ".card .title" selects a title inside a card; ".card.title" selects an element carrying both classes. They match different things, so that particular space can never be removed.
Will it break my CSS?
It should not, because it only removes characters the parser ignores and it tracks strings and comments as it goes. It does not rewrite values, merge shorthands or reorder rules. Those are where minifiers actually break stylesheets, and none of them happen here.
What does the exclamation mark in /*! mean?
It is a convention, not part of the CSS specification: minifiers treat it as "preserve this comment". It exists so licence and attribution headers survive a build, which some open-source licences require.
Can it minify CSS inside a style tag?
Paste the CSS itself rather than the surrounding HTML. Given a full style element it would treat the tags as selectors and produce nonsense. Extract the rules, minify, put them back.