CSS Minifier

Which spaces in CSS are safe to remove

Most whitespace in a stylesheet is there for people. A few spaces change what the browser reads, and removing them breaks the page in ways that are hard to trace:

• Between selectors. .nav :hover matches a hovered element inside .nav; .nav:hover matches .nav itself.
• Around + and - in calc(). calc(50% - 8px) subtracts, while calc(50% -8px) is invalid, because -8px reads as a negative number with no operator before it.
• After and in a media query. and (min-width: 768px) works, but and( reads as a function name and the browser drops the whole query.
• Between values. margin: 0 auto and gap: 1rem 2rem need the space to tell the values apart.
• Inside strings and URLs. content: "a : b" shows its spaces on the page, and a URL can contain // or ,.

What gets removed

The minifier removes /* */ comments (not /*! */ license comments), line breaks, indentation, spaces around {, }, ;, ,, > and each declaration's colon, the last ; before } and doubled ;.

Nothing else changes. #ffffff stays #ffffff, 0px stays 0px, two rules for one selector stay two rules, and an empty .a{} stays. That's deliberate: an optimizer saves more by rewriting values and merging rules (the In code tab shows how much), but then the output is no longer the CSS you tested.

Why minify CSS

Stylesheets in the <head> block rendering: the browser shows nothing until it has downloaded and parsed them, so fewer bytes there means a faster first paint on slow connections.

Server compression adds to the saving. Prism 1.30.0's default theme, prism.css, is 2,335 bytes, and 1,827 minified here. Gzipped, that's 683 bytes instead of 893; with Brotli, 569 instead of 738. For a bigger win, open the Coverage panel in Chrome DevTools: unused rules often cost more than whitespace.

If your site has a build step, let it minify (see In code). This page is for one-off jobs: the custom CSS box of a CMS or theme, a <style> block for an HTML email, or reading a vendor's minified file. For markup and scripts, use the HTML Minifier and the JavaScript Minifier.

The same stylesheet through three minifiers

A 174-byte stylesheet, minified here, with esbuild 0.28 and with Lightning CSS 1.33. esbuild rewrote every value it could: #ffffff to #fff, four zeros to 0, and rgba(255, 0, 0, 0.4) to #f006, a hex form that very old browsers don't understand. Lightning CSS, told to support browsers with at least 0.25% usage, kept rgba() and merged the two .box rules into one.

On a real file the gap is small. Prism ships its own prism.min.css, made by an optimizer that writes black as #000 and drops the quotes in [class*="language-"]. It's 1,789 bytes: 38 bytes less than this page's 1,827, and 5 bytes less after gzip.

.box {
  color: rgba(255, 0, 0, 0.4);
  margin: 0px 0px 0px 0px;
  background: #ffffff;
}
.box { padding: 8px; }
@media screen and (min-width: 768px) { .box { color: red } }

.box{color:rgba(255,0,0,0.4);margin:0px 0px 0px 0px;background:#ffffff}.box{padding:8px}@media screen and (min-width: 768px){.box{color:red}}

.box{color:#f006;margin:0;background:#fff}.box{padding:8px}@media screen and (min-width:768px){.box{color:red}}

.box{color:rgba(255,0,0,.4);background:#fff;margin:0;padding:8px}@media screen and (min-width:768px){.box{color:red}}

Minify CSS in a build step

These are the commands that produced the outputs above. Set browser targets when you use an optimizer, so it doesn't write color syntax your oldest supported browser can't read.

npx lightningcss-cli --minify --bundle --targets ">= 0.25%" input.css -o output.css

npx esbuild input.css --bundle --minify --outfile=app.min.css

npx prettier . --write