CSS
CSS

CSS Minification Best Practices

CSS minification techniques, shorthand properties, selector optimization, and tools for reducing CSS file size.

📄 Free PDF Download

Print-friendly · 1-2 pages · No sign-up required

Download PDF

What Minification Removes

  • › Whitespace, newlines, indentation
  • › Comments (/* ... */)
  • › Redundant semicolons
  • › Trailing zeros: 0.5 → .5
  • › Unnecessary units: 0px → 0
  • › Duplicate properties (keeps last value)
  • › Browser vendor prefix ordering (keeps needed ones)

Shorthand Properties

Longhand (verbose) Shorthand (compact)
margin-top/right/bottom/left: 10px margin: 10px
margin: 10px 10px 10px 10px margin: 10px
margin: 10px 20px 10px 20px margin: 10px 20px
padding: 5px 10px 5px 10px padding: 5px 10px
border-width/style/color border: 1px solid #000
background-color: #ffffff background-color: #fff
font-size/line-height/family font: 16px/1.5 sans-serif

Color Shorthand

Original Minified
#ffffff #fff
#000000 #000
#aabbcc #abc
#112233 #123
rgb(0,0,0) #000
white #fff

Before & After Example 

/* Before: 230 bytes */
.button {
    display: inline-block;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    background-color: #ffffff;
    border: 1px solid #000000;
    color: #333333;
    font-size: 16px;
}

/* After: 92 bytes (60% smaller) */
.button{display:inline-block;padding:10px 20px;background:#fff;border:1px solid #000;color:#333;font-size:16px}

Popular Minification Tools

Tool Use case
toolpilot.dev/tools/css-minifier/ Online, instant, no install
clean-css Node.js CLI and API
cssnano PostCSS plugin for build pipelines
Lightning CSS Rust-based, fastest (used by Vite)
Tailwind CSS (purge) Removes unused utility classes

Free Online Tools for CSS

{} CSS Minifier →

Keep This Reference Handy

Download the PDF and keep it on your desk or share with your team.

Download CSS Minification Best Practices PDF