Where the 333 bytes went in the sample
The editor opens with a 40-line card stylesheet written for Toolexe category pages. Full mode takes the file from 831 bytes to 498, a 40.1% cut. Each step below lines up with one checkbox or one rule in the minifier.
| Step | What changed in the sample | Bytes |
|---|---|---|
| Whitespace | Indents, blank lines, spaces around { } : ; , > | 161 |
| Comments | Three /*! license line stays. | 137 |
| Empty rule | .tool-card--legacy { } had zero declarations | 20 |
| Shorter values | #FFFFFF to #FFF, #0055aa to #05a, 0px to 0, 0.75rem to .75rem, 1.10rem to 1.1rem | 15 |
| Total removed | 333 | |
Value shortening earns the least. Turn the option off if a code reviewer wants to grep for #FFFFFF in the shipped file.
Raw size vs bytes on the wire
Most servers gzip or Brotli-compress CSS before sending. Compression already folds repeated spaces into short references, so minifying saves less over the network than the raw count suggests. The sample proves the point: raw drops 40.1%, gzip drops from 468 to 336 bytes.
We ran two files from the Toolexe repository through this exact code:
- Hand-written theme, 2,801 lines. Raw 47,157 to 37,172 bytes (21.2% smaller). Gzip 9,000 to 7,881 bytes (12.4% smaller).
- Admin theme built on Bootstrap 5.3.3, already minified. Raw 766,434 to 755,660 bytes (1.4%). Gzip 91,003 to 90,260 bytes (0.8%). The 748 KB file took about 120 ms in our Node test.
Three spots where careless minifiers break CSS
Stripping whitespace sounds safe. Three cases prove otherwise. The previous version of this page failed the first one.
Math inside calc()
The CSS spec requires spaces around
+or-insidecalc(),min(),max(),clamp(). A regex stripping spaces around every+outputscalc(100%+2rem). Browsers reject the declaration, so the width silently falls back to auto.width: calc( 100% - 2rem ); inputwidth:calc(100% - 2rem) this pageThe space before a colon in a selector
.tool-card :hoverstyles any hovered element inside the card..tool-card:hoverstyles the card itself. Same characters, different targets. The minifier keeps a space before a colon in selectors, removing colon spacing only inside declarations.Quoted strings & url()
The sample badge uses
content: " new ". Those padding spaces render on screen. Strings, plus unquotedurl(data:...)values, pass through byte for byte, including any{or;inside them.
Which output mode to pick
Full 498 B on the sample
One line, smallest file. Ship this to production or a CDN.
Rule per line 503 B
Each top-level rule, including a whole @media block, gets one line. A changed selector shows up as one changed line in a Git diff, for five extra bytes here.
Property per line 577 B
A quick read of compressed output, still without comments. For real formatting with consistent indents, open the CSS Beautifier.
Keep the /*! checkbox on when the file bundles MIT or BSD code such as Bootstrap or normalize.css. Both licenses ask for the copyright notice to travel with every copy, which is why most build tools treat /*! as "do not strip".
When this page is the wrong tool
- Your project has a build step. Vite, webpack, Parcel, esbuild ship with Lightning CSS, cssnano or their own minifier. Those run on every build, write source maps, merge duplicate rules. Use this page for a one-off file, a WordPress theme edit, or a size check before you argue for a build change.
- You want unused CSS gone. Minification keeps every selector. On a Bootstrap-sized sheet the real savings come from dropping rules no page uses. Run the Coverage panel in Chrome DevTools or PurgeCSS for those.
- Your source is SCSS, Sass or LESS. Compile first with the SCSS compiler or LESS compiler, then minify the CSS. Nested rules pass through untouched, not flattened.
- You expect structural rewrites. No shorthand merging (
margin-topplusmargin-bottomintomargin), no duplicate selector merging, no reordering. Those rewrites shift the cascade in edge cases, so we left them out on purpose. - The file is huge. The limit is 20 MB. Anything past 5 MB stalls the tab for a second or two on each keystroke. A command-line minifier suits batch jobs better.
