I need to maintain & improve an existing website and I am drowning in the redundancy I have discovered in its CSS stylesheet. Given the existing redundancy and non-methodlogical ordering of elements, it’s hard to track and predict how a minor change will propagate through the system, or where to apply a change to achieve a certain effect, without spending a lot of time re-learning the CSS file and experimenting.
I have been using the latest Firebug and “Web Developer” add-ons for Firefox, but clearly they are not sufficient for me. I need a tool that can tell me where redundant “overrides” are and perhaps suggest a better cascading scheme.
In other words, help me generate the shortest CSS file that provides the same exact visual functionality that I have right now.
To further clarify, I am not looking for a tool that replaces “#000000” with “#000”, “0.5em” with “.5em”, “white” with “#FFF”, etc. (this addresses “number of characters” redundancy, but doesn’t address the “cascading logic” redundancy). I am looking for a tool that can tell me, for example, that a “font-size: 10px” attribute of a child element is redundant because it is already inherited from its parent.
A more advanced feature: “color: #000000” attribute of a class or an id is redundant because it is not used in any of the HTML/PHP files on the website.
Is there a tool that does this kind of “normalization” automatically?
For finding duplicate/unused/unnecessary CSS based on your markup, you can try out WARI, or Dust-Me Selectors (as @Aaron D mentioned), or CSS Crunch. The last two are browser extensions (for Firefox and IE, respectively), which will only look at one page, while WARI is intended to look at an entire site. However, I’ve not had much luck getting WARI to work.