Tools to optimize (remove redundancy and merge) CSS?

Lucian Povatanu picture Lucian Povatanu · Sep 17, 2012 · Viewed 44.2k times · Source

I'm searching for a good CSS compress, merge and optimization tool. I have found tools that clean the CSS but they don't optimize the overwrites.

Here is a basic example:

a{color:#000}

and on another line the a color is overwritten with this:

a{color:#fff}

Does anyone know of a tool that can clean the unused CSS, that was overwritten and keep just the applied style?

Answer

Whymarrh picture Whymarrh · Sep 20, 2012

I don't particularly understand what you mean by "clean unused CSS", but in any case, I'll throw two tools at you, and maybe one will work (the good ol' shotgun approach).

CSS Lint seems to point out "duplicate properties". There are a range of articles covering some of what it does. But a test with the two definitions you had,

a { color: #fff; }
a { color: #000; }

it didn't do much of anything. While ...

Code Beautifier did combine the two selectors, opting for the latter of the two (i.e. the style that's actually applied). Resulting in:

a {
  color:#000;
}