CSS Cleaner

This tool takes a stylesheet that has grown by accretion and gives it back with every rule defined once. Duplicate selectors are merged with the last definition winning, as the cascade would have resolved them. Adjacent rules with identical declarations are grouped, and media queries for the same breakpoint are combined into one block. Everything runs in your browser. Nothing is uploaded.

The output is the same styling in a smaller file that is easier to maintain. It accepts minified or formatted CSS and returns either.

How To Use

1. Paste CSS only, with no style tags, HTML or JavaScript, or load a .css file.
2. Click Clean CSS.
3. Read the statistics and the cleaned CSS in the right panel.
4. Toggle Sort Properties or Minify Output. The output updates on each change.
5. Copy the result with Copy to Clipboard.

Keep a copy of the original before replacing it, and check the site looks the same afterwards. The Limits section below lists the cases where the cascade can change.

What The Cleaner Does

The parser walks the stylesheet once, matching braces and honoring quotes and parentheses, so a semicolon inside a content string or a colon inside a url() is part of the value rather than a boundary. It sorts what it finds into plain rules, at-rules with nested rules such as @media, @supports, @container and @layer, and at-rules kept whole such as @keyframes, @font-face and @page.

Within each block, a selector that appears more than once is merged into one rule. Declarations from the later definition replace the earlier ones for the same property, and the merged rule takes the later position, which is how the cascade would have resolved it. Adjacent rules with identical declarations are grouped into one comma-separated selector list. Nested at-rules with the same query are merged into one block and cleaned the same way inside.

The output is regenerated in a fixed order: @charset, @import and other statements, @font-face, plain rules, nested at-rules in the order they first appeared, other block at-rules, then @keyframes. Sort Properties orders declarations alphabetically within each rule. Minify writes the same tree without whitespace, from the parsed structure rather than by stripping characters, so strings and values keep their spacing.

Before And After

A stylesheet that several people have added to over time tends to look like this:

.button { color: red; }
.nav { padding: 10px; }
.button { background: blue; }
@media (max-width: 768px) { .nav { padding: 5px; } }
.button { padding: 10px; }
@media (max-width: 768px) { .button { font-size: 14px; } }

After cleaning:

.nav {
  padding: 10px;
}
.button {
  color: red;
  background: blue;
  padding: 10px;
}
@media (max-width: 768px) {
  .nav {
    padding: 5px;
  }
  .button {
    font-size: 14px;
  }
}

The same input with every newline removed produces the same output, because the parser reads braces rather than line breaks.

What Gets Preserved

Selectors pass through untouched, including combinators, attribute selectors, pseudo-classes and pseudo-elements. Values pass through untouched, including vendor prefixes, custom properties, !important, quoted strings, url() and data URIs. A property repeated inside one rule with different values, the usual shape of a fallback such as display: -webkit-box followed by display: flex, keeps both declarations in order. @keyframes blocks, including vendor-prefixed ones, are kept whole with the last definition of each name winning.

Limits

Three things can change the cascade, and each is a deliberate trade for a smaller file. A selector defined twice with other rules between the definitions moves to the later position, so a rule that sat between them and matched the same element with equal specificity can change precedence. Nested at-rules move to the end of their block, so a plain rule that came after a media block in the original and overrode it will now be overridden by it. Grouping only merges adjacent rules, which keeps grouping from reordering anything.

Native CSS nesting, a rule inside another rule's braces, is not parsed. Such rules are passed through whole and are not deduplicated. Comments are removed.

Performance Impact

CSS optimization is a modest gain next to image or JavaScript work, but every byte counts. Stylesheets that have grown organically typically shrink 10 to 30 percent, and the load time improvement is small but measurable, most of all on slow connections. The larger saving is developer time: with each selector defined once there is no longer any question of which rule applies.

Tips

Leave Minify off while developing and turn it on for the production copy. Turn on Sort Properties if your team prefers a consistent order. Commit the original before replacing it and check the site after. Run the cleaner whenever a stylesheet has grown messy or after a large feature lands. It complements a build pipeline such as PostCSS or cssnano rather than replacing one.

Browser Compatibility

The tool runs entirely in your browser in plain JavaScript, with no server-side processing, and works in current Chrome, Firefox, Safari and Edge. The cleaned CSS is standard CSS that works wherever the original did.