DEV Community

Snappy Tools
Snappy Tools

Posted on

What Does a CSS Minifier Actually Remove? (And What It Keeps)

#css #webdev #performance #tools

"Just minify your CSS" is standard advice. But what does a minifier actually do? Knowing what gets stripped — and what doesn't — helps you understand when minification is safe and when edge cases might bite you.

What gets removed

A correct CSS minifier removes exactly these things:

1. Block comments

/* This comment disappears */
.btn { color: green; }
Enter fullscreen mode Exit fullscreen mode

Exception: Comments starting with /*! are preserved — by convention these hold licence notices and copyright headers that must appear in distributed files.

2. Whitespace between tokens

/* Before */
.card {
  display: flex;
  padding: 16px;
}

/* After */
.card{display:flex;padding:16px}
Enter fullscreen mode Exit fullscreen mode

Spaces around :, {, }, ,, and ; are all optional in CSS syntax.

3. The trailing semicolon in each rule block
The last property in a { } block doesn't need a semicolon — minifiers strip it.

/* Before */
.btn { color: green; margin: 0; }
/* After */
.btn{color:green;margin:0}
Enter fullscreen mode Exit fullscreen mode

4. Spaces around combinators

/* Before */
.nav > li > a { ... }
/* After */
.nav>li>a{...}
Enter fullscreen mode Exit fullscreen mode

5. Redundant units on zero values
margin: 0px becomes margin:0 — px is redundant on zero.

What does NOT get removed

Your actual CSS rules. Minification never removes selectors or declarations — only syntax around them.

Vendor prefixes. -webkit-, -moz-, -ms- are kept as-is. If you want to remove outdated prefixes, you need a separate tool like Autoprefixer.

Duplicate properties. If you have color: red; color: blue; in the same block, a basic minifier keeps both (the latter wins in the cascade). Only aggressive optimisers like cssnano's advanced preset may deduplicate these.

@import, @media, @keyframes. All at-rules are preserved and minified in place (whitespace stripped, but the rules remain).

Minification vs tree-shaking

There's an important distinction:

  • Minification — compress what you have, keep all rules
  • Tree-shaking (PurgeCSS, Tailwind JIT) — remove rules that are never used in your HTML/JS

For a utility framework like Bootstrap or Tailwind, tree-shaking produces far larger savings than minification alone. Run tree-shaking first, then minify the result.

Typical savings

File type Typical saving
Handwritten CSS with comments 25–40%
Handwritten CSS without comments 15–25%
Already-compact CSS 5–15%
After Brotli compression on top Additional 60–70%

Minify first, then serve with Brotli/gzip — the two are complementary, not alternatives.

A quick way to check

Paste your CSS into the CSS Minifier on SnappyTools and it shows you the original size, minified size, and exact percentage saved in a live stats bar — no signup, runs entirely in your browser. The Beautify tab works in reverse for when you receive minified CSS and need to read it.

Minification is one of the safest optimisations you can make. Once you know it only removes syntax — never logic — it becomes a no-brainer step before every production deploy.

Top comments (0)