How can I find unused/unapplied CSS rules in a stylesheet?
- by liori
Hello,
I've got a huge CSS file and an HTML file. I'd like to find out which rules are not used while displaying a HTML file. Are there tools for this?
The CSS file has evolved over few years and from what I know no one has ever removed anything from it--people just wrote new overriding rules again and again.
EDIT: It was suggested to use Dust-Me Selectors or Chrome's Web Page Performance tool. But they both work on level of selectors, and not individual rules. I've got lots of cases where a rule inside a selector is always overridden--and this is what I mostly want to get rid of. For example:
body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }
All the text in my HTML is inside some wrapper element, so it is never white. body's padding always works, so of course the whole body selector cannot be removed. And I'd like to get rid of such useless rules too.
EDIT: And another case of useless rule: when it duplicates existing one without changing anything:
a { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }
I'd happily get rid of the second margin-left... again it seems to me that those tools does not find such things.
Thank you,
