Developer guide
How to use a CSS minifier safely
CSS minification reduces transfer size by removing unnecessary formatting, but the compact stylesheet should still be tested in the browsers and build path where it will run.
Open the CSS MinifierWhat CSS minification removes
A conservative CSS minifier removes whitespace and ordinary comments, then prints a compact stylesheet. It should preserve rule order, declaration order, strings, calc() expressions, and custom property token values.
Minification is different from restructuring. Combining rules, shortening colors, removing prefixes, or reordering declarations can create additional compatibility risk and is not required to make CSS smaller.
How to use a CSS minifier
- Start from a tested, valid stylesheet.
- Keep the readable source in version control.
- Paste the CSS or open a UTF-8 file, then select Minify CSS.
- Review retained license comments and the reported result.
- Save the compact file as a build artifact and test the deployed page.
The ToolPixels minifier preserves comments beginning with !, @license, or @preserve. It does not rename selectors, merge rules, remove browser prefixes, or restructure the cascade.
A simple minification example
Input
/* card spacing */
.card { padding: 16px; color: #191919; }
Output
.card{padding:16px;color:#191919}
The browser receives the same declarations in the same order, but comments, indentation, and unnecessary spaces are gone.
Minification versus compression
| Method | Applied to | Purpose |
|---|---|---|
| Minification | Source text | Remove unnecessary characters |
| Gzip or Brotli | HTTP response | Compress repeated byte patterns |
Use both when possible. Minification makes the source smaller before transfer, while HTTP compression usually produces the larger network saving.
When minified CSS can go wrong
- Unsupported or malformed syntax may be rejected by the parser.
- Aggressive tools can alter fallback order or custom property tokens.
- License notices may need explicit preservation.
- Editing only the minified file makes future maintenance difficult.
Compare key pages before and after deployment, including responsive states, animations, and older-browser fallbacks used by the project.
Use CSS Minifier in your browser
Minify tested CSS locally with conservative parsing and compact printing, while keeping rule and declaration order intact.