Minify CSS — Optimize Stylesheet File Size

How CSS Minification Works

CSS minification compresses stylesheets by removing characters that are not needed for the browser to interpret the rules. A typical CSS minifier reduces file size by 30-50% before gzip/Brotli compression.

What Gets Removed

/* Before minification */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center content vertically */
  justify-content: center;
  padding: 16px 16px 16px 16px;
  margin: 0px;
  background-color: #ffffff;
}

After minification:

.container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;margin:0;background-color:#fff}

Key Optimizations

1. Whitespace removal — Spaces, tabs, newlines, and indentation between selectors, properties, and values are stripped.
2. Comment removal — All /* */ comments are deleted (except /*! */ license comments, which are optionally preserved).
3. Shorthand collapsing — padding: 16px 16px 16px 16px becomes padding: 16px.
4. Zero unit removal — 0px becomes 0 (units on zero values are unnecessary).
5. Color shortening — #ffffff becomes #fff; rgb(255, 0, 0) can become red.
6. Redundant declaration removal — If the same property appears twice in one rule, only the last value is kept.
7. Selector merging — Rules with identical declarations are combined.

Popular CSS Minifiers

• cssnano — The most widely used PostCSS-based CSS optimizer with pluggable presets.
• esbuild — Handles CSS minification alongside JavaScript bundling.
• Lightning CSS (formerly Parcel CSS) — Written in Rust, extremely fast with built-in browser targeting.
• clean-css — Mature Node.js library with extensive optimization options.

Advanced Optimizations

Some minifiers also perform:

• Removing unused at-rules (empty @media blocks, duplicate @import)
• Normalizing values (bold to 700, normal to 400)
• Collapsing adjacent rules when selectors match

What Minifiers Cannot Do

CSS minifiers do not remove unused CSS rules — that requires a separate tool like PurgeCSS or Tailwind's JIT compiler.