· Igor Ilic

CSS minification: why and how to minify your stylesheets

What is CSS minification?

CSS minification removes all characters from a stylesheet that are not required for rendering — whitespace, comments, extra semicolons, and optional quotation marks. The result is identical CSS in a fraction of the file size.

What minifiers remove

  • Whitespace — spaces, tabs, newlines between selectors and declarations
  • Comments — both /* block */ and // line comments
  • Trailing semicolons — the last declaration in a block does not need a semicolon
  • Optional units — 0px becomes 0
  • Colors — #FF6600 becomes #F60, rgba(0,0,0,0) becomes transparent

Before and after

/* Before: readable but bloated */
.container {
  margin: 0 auto;
  padding: 20px 15px;
  background-color: #ffffff;
  border-radius: 4px;
}

/* After: minified */
.container{margin:0 auto;padding:20px 15px;background-color:#fff;border-radius:4px}

Bundle size impact

A typical Bootstrap stylesheet shrinks from around 200 KB to 160 KB after minification. Combined with gzip compression, the savings are even greater — often 70-80% of the original size.

Minify your CSS online

Use the CSS minifier to compress your stylesheets instantly. It also handles JavaScript and HTML minification in the same interface.

Back to all articles