CSS Minifier

A CSS minifier with structural optimization

This CSS minifier uses CSSO (CSS Optimizer), which goes further than stripping whitespace. It parses the stylesheet, shortens values where a shorter equivalent exists, and, with Merge rules enabled, restructures the file: merging rules with the same selector, removing overridden declarations and combining shorthand properties. Smaller CSS matters because stylesheets are render-blocking: the browser waits for them before it paints the page.

Example

/*! theme v2 */
/* buttons */
.btn { color: #ffffff; margin: 0px 0px 0px 0px; padding: 10px 20px 10px 20px; }
.btn-primary { color: #ffffff; background-color: #ff0000; }
.link { font-weight: bold; }
.link { color: #0f766e; }

.btn{color:#fff;margin:0;padding:10px 20px}.btn-primary{color:#fff;background-color:red}.link{font-weight:700;color:#0f766e}

The status bar shows 224 → 124 bytes (45% smaller). CSSO removed comments and whitespace, shortened #ffffff to #fff and #ff0000 to red, collapsed 0px 0px 0px 0px to 0 and the repeated padding pair to two values, wrote bold as 700, and merged the two .link rules into one.

Options explained

• Merge rules (restructure, on by default) enables structural optimizations: merging identical selectors, moving declarations between rules and removing declarations that are overridden later. With it off, each rule is minified in place; in the example the two .link rules stay separate and the margin becomes 0 0 0 0.
• Keep /*! comments preserves "important" comments that start with /*!, the convention for license and copyright banners. Normal comments are always removed.

Is restructuring safe?

CSSO is careful to keep the cascade intact: it only moves or merges declarations when doing so cannot change which rule wins. In rare cases, especially with hacks that rely on browsers ignoring invalid values, restructuring can change behavior. If a page looks different after minifying, try again with Merge rules off; that mode only makes local, value-level changes.

What CSS minification does not do

• Remove unused selectors. A minifier cannot know which classes your HTML uses. Tools like PurgeCSS or Tailwind's content scanning do that at build time.
• Add vendor prefixes. That is Autoprefixer's job.
• Optimize nested CSS. CSSO's parser does not read CSS nesting (a rule written inside another rule). Such a stylesheet only has its comments and whitespace removed: values are not shortened, and Merge rules has no effect.
• Replace server compression. Enable gzip or Brotli on your server as well; the two work together, and minified CSS usually compresses slightly better too.

Why CSS size affects page speed

Browsers must download and parse all CSS linked in the <head> before they render anything, so stylesheet size feeds directly into First Contentful Paint and Largest Contentful Paint, two metrics Google reports in Core Web Vitals. Minification is the easy first step. For bigger wins, split rarely used styles into separate files, inline a small amount of critical CSS for above-the-fold content, and remove unused rules. Measure the transferred (compressed) size in your browser's network panel, since that is what users actually download.

Tips

• Keep the readable file as your source and treat the minified copy as a build output, named for example styles.min.css.
• Minify the compiled CSS, not the SCSS or LESS source. Compile with the SCSS Compiler (it has its own Minify output option) and optionally run the result through CSSO for restructuring.
• Validate first: a syntax error such as a missing brace can make the minifier drop or merge rules unexpectedly. The CSS Validator finds those.

To turn a minified stylesheet back into readable code, use the CSS Formatter. Minification happens locally in your browser.