🔃 CSS Minifier

Every byte of CSS your browser downloads is a byte not spend painting pixels. If you ship an un-minified framework to production, someone on a slow mobile network is silently waiting on your formatting choices.

Paste your stylesheet in. The tool hands back a minified version and tells you exactly how much you saved -- typically 30-50 % on a well-commented dev sheet.

The surprising gotcha with CSS minification: it can change which styles win.

Minifiers shorten margin: 10px 10px 10px 10px to margin:10px (shorthand applied to all sides). They merge neighboring rules that share a selector, collapse margin: 10px 0 followed by margin: 0 10px into a single declaration, and may reorder properties. Reordering flips the cascade if the original author relied on declaration order to break a tie between equal-specificity rules. Sound aggressive? That is the "aggressive" mode, and it is the reason you should preview the diff before shipping it.

Three modes so you know what you are paying for:

• Safe mode removes whitespace, comments, and trailing semicolons. Nothing else. Output renders identically to input, guaranteed. Use this when you just want smaller files with zero cascade risk.

• Standard mode also collapses colors (#ff0000 to #f00, rgb(0,0,0) to #000), removes units from zeros (0px to 0), shrinks shorthand where it is safe, and strips vendor prefixes that Autoprefixer already handles. High confidence, low risk.

• Aggressive mode additionally merges adjacent selectors with identical bodies, rewrites rgba(0,0,0,.5) into #00000080, and hoists shorthand to absorb longhands. Divergences start here -- if anyone in your codebase hand-ordered properties for a reason, this will erase that ordering.

A few more useful details:

• Comments starting with /*! (the standard "important comment" marker) are preserved via keepSpecialComments. License banners survive minification. Everything else is stripped.

• CSS custom properties (--brand: #fd6e20 and var(--brand)) are left alone. Substituting them in would break the dynamic cascade. The same goes for calc() and env().

• Source maps can be generated so browser DevTools map errors back to the original line. Essential in staging. In production you typically turn them off (the map file is often larger than the CSS it describes).

• Duplicate selectors are flagged, not deduplicated automatically. The report is a nice quick audit -- if your stylesheet has three .header .nav rules, something went wrong authoring it.

Always verify against a staging URL before letting aggressive minification ride to production. Minification bugs do not throw exceptions -- they just silently turn a button the wrong color.