CSS Minifier & Beautifier

Exactly what gets removed

This minifier is a small scanner, not a full CSS parser. It runs five steps in order, and understanding them tells you both what it saves and what it deliberately leaves alone.

1. Every /* ... */ comment is deleted, including license banners that start with /*!. A comment that sits between two selectors or values with no space around it leaves no gap, so .b/**/.c stays .b.c.
2. Quoted strings, unquoted url(...) values and backslash escapes such as \;, \> or \{ are set aside untouched, so spaces, semicolons and braces inside them survive and an escaped character is never read as syntax.
3. Every run of whitespace, including line breaks, collapses to a single space, and the stylesheet is split into selectors, at-rule headers and declarations.
4. In selectors, spaces around ,, >, ~ and + are deleted, except inside parentheses or brackets. In declarations, spaces around the colon and commas are deleted. Spaces between the words of a value stay.
5. The last ; before a closing } is dropped, the protected strings are put back, and the result is trimmed. A semicolon that ends a top-level statement such as @import url(b.css); is kept.

Nothing else is touched. Colours are not shortened (#ffffff stays), 0.50px stays, rules are not merged and shorthand is not generated. That keeps the result predictable, but a build tool such as cssnano or Lightning CSS will usually save more.

Worked example

This 125-character rule set, with a comment and indentation:

/* Card */
.card {
  margin: 0 auto;
  padding: 16px 24px;
  background: #ffffff;
}

.card > p,
.card:hover {
  color: red;
}

becomes this 87-character line, a saving of 30%:

.card{margin:0 auto;padding:16px 24px;background:#ffffff}.card>p,.card:hover{color:red}

The Input, Output and Saved figures count characters in the text box. The percentage is calculated against the original, and real transfer sizes will be smaller again once the server applies gzip or Brotli.

What it deliberately leaves alone

• calc(), min(), max() and clamp(). Spaces around + and - inside parentheses are required by CSS, so calc(1px + 2px) stays valid. Only the padding just inside the parentheses and around commas is removed.
• Descendant selectors. .a :first-child keeps its space, because removing it would change the meaning from "descendants of .a" to ".a itself". Only the >, ~ and + combinators are compacted.
• Custom properties. A { ... } block inside a --name: value is treated as part of the value, and the ; after it is kept, so the next property is not swallowed.
• Strings and URLs. content: "a b" keeps both spaces, and a url(data:image/png;base64,...) value is never split.
• Media query headers. The text after @media is kept as written, apart from spaces around commas.

It is still a lightweight scanner, so give unusual or very new syntax a quick look and compare the page visually before you ship.

The Beautify button

Beautify uses the same scanner, then re-indents with two spaces and one declaration per line. Rules nested inside @media are indented one level further, a:hover keeps its colon, selector combinators are written with spaces (.a > .b), data URLs stay on one line, and every declaration ends with a semicolon. Comments cannot be restored once removed.

For markup or scripts use the HTML minifier or JS minifier.