CSS Minifier

Minify CSS by removing comments, collapsing whitespace, and shrinking selectors. Reduces file size 30-50%.

0 bytes
0 bytes

Share on Social Media:

Why minify CSS

Like HTML, CSS files contain whitespace and comments that browsers ignore but that increase download size. A typical authored CSS file is 30-50% larger than its minified equivalent. For sites with multiple stylesheets totaling hundreds of KB, minification meaningfully reduces page load time and bandwidth costs. Modern build tools (Webpack, Vite, Rollup) minify CSS automatically; this tool fills the gap for one-off cases, hand-edited stylesheets, or pre-build inspection.

The reduction matters: a 100 KB stylesheet minified to 60 KB saves 40 KB per page load. Multiplied by 1 million page views, that's 40 GB of bandwidth saved monthly. With Core Web Vitals factored into Google's ranking algorithm, smaller stylesheets translate directly to better SEO performance.

What this minifier does

The tool runs a sequence of CSS-aware regex transformations:

  1. Strip CSS comments. /* like this */ are removed. Comments are useful during development but never affect rendering.
  2. Collapse whitespace. Multiple spaces, tabs, and newlines collapse to single spaces.
  3. Remove space around delimiters. Space around { } : ; , > is removed. None of those characters need surrounding whitespace to parse.
  4. Drop trailing semicolons. The semicolon before the closing brace of each rule is unnecessary; removing it saves bytes.
  5. Trim leading/trailing whitespace.

What it doesn't do (limits)

This is a fast regex-based minifier. For deeper optimization, you'd want a real CSS parser (cssnano, csso, lightningcss) which can do:

  • Merge identical selectors. If two rules have the same properties but different selectors, combine them into one rule with a comma-separated selector list.
  • Drop unused CSS rules. Identify rules that don't match any element in your HTML; remove them. (Requires HTML for analysis.)
  • Shorten color values. #FFFFFF → #FFF. rgb(255, 255, 255) → #fff. red → #f00.
  • Combine shorthand properties. margin: 0 0 0 0 → margin: 0. border-top-width: 1px; border-right-width: 1px can sometimes be combined.
  • Remove duplicate properties within a rule. If you accidentally repeat a property, real minifiers keep only the last (winning) occurrence.
  • Optimize selectors. Some selectors can be simplified without changing match behavior.

Our regex minifier captures the simple-but-significant 70-80% of savings — strip whitespace, comments, redundant punctuation. For the last 20-30%, use a build-time CSS optimizer integrated into your deploy pipeline.

Common workflows

Inline critical CSS

Performance optimization technique: extract above-the-fold styles, minify them, embed in <head> as inline <style>. Saves a network roundtrip for the first paint, dramatically improving LCP score.

Email templates

Email clients are fussy about file size and inline-CSS support. Many clients reject linked external CSS, so styles must be inlined. Minified inline CSS keeps the email body within deliverability size limits.

Embedded micro-stylesheets

Small CSS embedded in HTML files via <style> tags benefits from inline minification. Use this tool to compress before embedding.

Pre-deployment manual cleanup

Hand-edited stylesheets benefit from minification before publishing. Run through this tool, copy the result, deploy.

Reverse-engineering competitor CSS

When researching how a competitor styled their site, their compiled CSS is usually minified. Our beautifier-and-formatter doesn't directly help — but understanding minification is part of reverse-engineering web tech.

Quick "is this stylesheet too big?" checks

Run a stylesheet through the minifier. If the reduction is 50%+, the original is whitespace-heavy and worth optimizing further. If only 10-15%, the original is already tight and further savings come from semantic optimization.

What CSS-specific cleanups happen

Selectors. Spaces in selectors are critical (div p ≠ divp) but spaces within selectors aren't (div p minifies to div p).

Combinators. >, +, ~ can have spaces removed. div > p → div>p.

Pseudo-selectors. :hover, ::before spaces are preserved (the spaces aren't in the original; they shouldn't be).

Property declarations. color: red ; minifies to color:red.

Final semicolon before }. Always removed because it's optional.

Performance impact: real numbers

A typical Bootstrap-style stylesheet (100 KB authored) minifies to about 60 KB. Adding gzip compression on the wire reduces it to about 12 KB transferred. Without minification, the same gzipped file is about 14 KB — a 17% extra wire savings just from minifying first.

Tailwind CSS users see different ratios — Tailwind generates large semicolon-heavy output where our regex minifier captures 30-40% reduction. Combine with Tailwind's PurgeCSS / JIT compilation to remove unused utility classes, and final output is often just 5-10 KB.

Privacy

Minification runs entirely in your browser via regex operations. Your CSS never reaches our server. Useful for proprietary stylesheets, internal design system code, or any CSS you don't want exposed to a third-party service. The PHP class behind the tool aborts 404 on any POST request.

FAQ

Will minification break my CSS? No — minification only removes whitespace, comments, and redundant punctuation. The semantic meaning of your stylesheet is unchanged.

What about CSS-in-JS? JS source files containing CSS-in-JS need to be minified by a JavaScript minifier. The CSS within them is processed during build time, not by this tool.

Can I minify SCSS or LESS? The tool minifies CSS-syntax content — SCSS and LESS files have their own syntax that this tool will mangle. Compile to CSS first (using your build tool), then minify the output.

What about CSS variables (--my-color)? Preserved correctly. Variables and their var() references are valid CSS syntax.