What CSS minification must preserve

Smaller is useful when the stylesheet still means the same thing

A stylesheet is more than characters separated by spaces. Some spaces separate tokens; others are part of a quoted value. Removing both with the same replacement can change the page. DevHelpers parses CSS before generating compact output, so the input has a structure to work with. Start with the example, then repeat the checks with a stylesheet from your own project.

Keep the contents of strings

The two spaces inside this content value are intentional. A compact printer can remove spaces around the colon and braces while retaining the quoted value. Custom-property values are retained too: the tool cannot know how a later var() use will interpret them.

.card::before { content: "Two  spaces stay here"; }
.card { --label: "Hello  world"; }

Respect expressions and data URLs

Expressions and URLs have their own syntax. The example combines calc() with a small embedded SVG URL. Inspect the result as a stylesheet rather than treating slash characters, quotes or punctuation as ordinary prose.

.card {
  width: calc(100% - 2rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
}

Decide which comments to keep

An ordinary development comment can be removed. A notice beginning with /*! or containing @license or @preserve is kept by the default setting. Review the notices in your source and the requirements for the assets you distribute before changing that option. Custom-property raw values can retain their comments to preserve token behavior.

Run the example, then check your page

Open the example above and select Minify CSS. Compare source and output byte counts, inspect the quoted values, and copy or download the result. Byte savings use UTF-8, so they include the cost of non-ASCII characters. Already compact CSS may have little to remove. The tool does not decide which selectors are unused or which browsers your project supports.

• Keep license preservation enabled when notices need to remain.
• Check the result in the same pages and browser targets as the original stylesheet.
• Treat a parser error as a reason to repair the input; old output is cleared after edits.
• Use your normal application checks before replacing a production stylesheet.