47

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?

Lucian Povatanu
  • 609
  • 1
  • 5
  • 7
  • 1
    I edited the title. Just "compression" and "minifying" are orthogonal to actual smart-optimization of CSS. This is a fairly interesting question, although I would normally vote-to-close such "find me a tool" questions .. –  Sep 16 '12 at 23:06
  • 1
    [CodeKit](http://incident57.com/codekit/) is a OS X application for things like that. Not sure if it does the specifics though. – Whymarrh Sep 16 '12 at 23:07
  • 1
    Tks pst .Tks Whymarrh,but I can't test CodeKit app, I'm a Win/Linux user :) – Lucian Povatanu Sep 16 '12 at 23:30
  • 1
    @LucianPovatanu maybe something from [this question](http://stackoverflow.com/questions/135657/tool-to-identify-unused-css-definitions) will help. – Whymarrh Sep 18 '12 at 17:38
  • 1
    @Whymarrh tks for that link, but what I was asking is a tool that can clean used or unused css overwrites, so an "unused css cleaner" isnt the answer. – Lucian Povatanu Sep 19 '12 at 13:36
  • I just responded to this post - https://stackoverflow.com/questions/25320591/how-to-check-for-duplicate-css-rules. Try CSSBurner - it seems to be able to optimize in the way you are looking for. CSSLint has nice UI but doesn't seem to do what you are asking for – The One and Only ChemistryBlob Aug 07 '17 at 00:02
  • Just updated our Node JS tool: http://rbtech.github.io/css-purge – AEQ Nov 13 '17 at 07:10

1 Answers1

21

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;
}
Whymarrh
  • 13,139
  • 14
  • 57
  • 108