How to Minify CSS for Production
CSS minification removes whitespace and comments to reduce file size. Learn safe minification techniques that don't break your styles.
Key Takeaways
- CSS minification strips comments, whitespace, semicolons after the last property, and unnecessary zeros (0.5 โ .5, 0px โ 0).
- Minification typically reduces CSS file size by 15-25%.
- Never remove CSS that looks unused without testing โ it may be used dynamically.
- Generate source maps alongside minified CSS so browser DevTools can map back to original line numbers.
- Client-side CSS minification processes files entirely in the browser.
CSS Minifier
What Minification Removes
CSS minification strips comments, whitespace, semicolons after the last property, and unnecessary zeros (0.5 โ .5, 0px โ 0). Advanced minifiers also merge duplicate rules and shorten color values (#ffffff โ #fff).
Size Savings
Minification typically reduces CSS file size by 15-25%. Combined with gzip/brotli compression, the total reduction reaches 80-90%. For a 100KB stylesheet, this means serving just 10-20KB over the network.
Safe Minification Rules
- Never remove CSS that looks unused without testing โ it may be used dynamically.
- Preserve
!importantdeclarations exactly as written. - Don't merge media queries that appear in different order โ cascade matters.
- Keep
@charsetdeclarations at the top of the file.
Source Maps
Generate source maps alongside minified CSS so browser DevTools can map back to original line numbers. This makes debugging minified CSS in production possible.
Browser-Based Minification
Client-side CSS minification processes files entirely in the browser. This is useful for quick one-off minification without setting up build tools.
Related Tools
Related Formats
Related Guides
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units is essential for building responsive, accessible interfaces.
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and how to combine them for robust, responsive page layouts.
How to Create CSS Gradients: Linear, Radial, and Conic
CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control over color stops, direction, and shape.
Troubleshooting CSS Specificity Conflicts
When CSS rules unexpectedly override each other, specificity is usually the culprit. This guide explains how specificity is calculated and provides strategies for managing it in growing codebases.
CSS Custom Properties (Variables) Best Practices
CSS custom properties enable dynamic theming, design tokens, and maintainable style systems. Learn how to organize, scope, and use CSS variables effectively in production applications.