CSS Formatter / Minifier
Beautify CSS with indentation, or minify to strip redundant whitespace in one click
CSS formatter and minifier: why the spaces inside calc() must not be removed
What minification concretely removes
CSS minification safely drops characters that are syntactically unnecessary. Common optimizations include:
| Optimization | Example |
|---|---|
| Remove comments | /* ... */ removed entirely (including copyright notices — commercial projects should check license obligations) |
| Collapse whitespace and newlines | Multiple rules compressed onto one line |
| Drop the last semicolon | color:red;} becomes color:red} |
| Strip units from zero values | margin: 0px becomes margin: 0 |
| Shorten hex colors | #ffffff becomes #fff, #aabbcc becomes #abc |
| Omit the leading zero | 0.5em becomes .5em |
Size usually drops by 20% to 30%. But one thing is clear: if you enable gzip or brotli compression at the HTTP layer, the extra gain from hand-minifying CSS is small — general-purpose compression already eliminates the repeated whitespace and structure. Hand minification truly earns its keep in three places: static hosting where server compression cannot be turned on, inline style blocks inside HTML, and scenarios with strict size limits.
The space you cannot delete: calc()
This is the most dangerous spot when minifying CSS. Inside CSS calc(), the plus and minus signs must have spaces on both sides:
| Form | Result |
|---|---|
calc(100% - 10px) | Correct |
calc(100%-10px) | Invalid (parsed as an invalid expression) |
calc(100% -10px) | Invalid |
The reason: after seeing 100%, the parser tries to recognise a number or unit token, and -10px is read as a negative value rather than a subtraction, making the whole expression illegal.
Multiplication and division are unaffected (so calc(100%/3) is legal), because multiply and divide need no whitespace to separate operand from operator. An implementation that "deletes all spaces" therefore silently breaks every calc that uses addition or subtraction, and the symptom is a layout that suddenly shifts — and this kind of bug only appears in production after minification, never in local development. This tool keeps the spaces around plus and minus inside calc() when minifying.
Other formatting notes
- Comments vanish on minification. Hacks built on comments (such as deliberately leaving a marker on a selector) and license notices disappear. Anything you must keep belongs in a separate license file.
- Whitespace between selectors is meaningful.
.a .b(descendant) and.a.b(matched together) are completely different, so minification must not delete selector-internal spaces wholesale. - Quotes in attribute selectors and content. The quotes in
content: "";and[href^="http"]must stay; deleting them breaks the syntax. - Whitespace around
!important. It can be compressed, but some older parsers do not allow omitting the space between!andimportant. Both! importantand!importantare legal; unifying to the latter on minify is safest. - Custom property values are raw tokens. In
--gap: 8px 16px;the whitespace is part of the value, and a minifier should not casually process custom-property values. - Media queries and nesting. After minification a pile of rules crammed onto one line is hard to debug, so keeping an unminified source file is necessary — the minified artifact should be a deploy artifact only, never an edit target.
How to use the tool
Two directions: format (indent rule sets for reading and review) and minify (drop redundant whitespace for deployment). They differ in reversibility — minification is irreversible (comments and formatting information are lost), so always minify a copy of the source.
Everything happens in the page; there is no upload step.
FAQ
Does minify remove comments?
Yes. Minify mode removes /* */ comments and all redundant whitespace, significantly shrinking size for production.
Does minification change the styling effect?
No. It only removes whitespace where syntax allows, producing an equivalent compression.