CSS Minifier / Beautifier

CSS Minification Guide

CSS minification removes unnecessary characters from your stylesheets without changing functionality. This includes whitespace, comments, unnecessary semicolons, and redundant values. Minified CSS loads faster, reducing page load time and bandwidth.

What CSS Minification Does

• Removes comments — /* ... */ comments are stripped
• Removes whitespace — spaces, tabs, newlines between rules
• Removes last semicolons — the final semicolon before } is optional
• Shortens zero values — 0px → 0, 0.5 → .5
• Shortens hex colors — #ffffff → #fff

Before & After

/* Before (388 bytes) */
.container {
  max-width: 1200px;
  margin: 0px auto;
  padding: 0px 24px;
}

.header {
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
  padding: 16px 0px;
}

/* After (145 bytes — 63% smaller) */
.container{max-width:1200px;margin:0 auto;padding:0 24px}.header{background-color:#fff;border-bottom:1px solid #eee;padding:16px 0}

How Much Can You Save?

When to Minify

• Production builds — always minify CSS in production
• Inline styles — minify CSS in <style> tags
• Email templates — reduce CSS to stay under email size limits
• Performance audits — Lighthouse flags unminified CSS

Build Tool Integration

// PostCSS + cssnano (recommended)
npm install cssnano --save-dev

// postcss.config.js
module.exports = {
  plugins: [require('cssnano')({ preset: 'default' })]
}

// Vite (built-in)
// CSS is automatically minified in production builds

// Webpack (css-minimizer-webpack-plugin)
npm install css-minimizer-webpack-plugin --save-dev