Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

EDIT: I appreciate all the answers, but sadly the tools you suggested did not make any useful suggestions. I upvoted your answers, but I'll wait for a tool that does things more granularly, as specified above.

Thank you,

share|improve this question
    
You could take the lack of any suitable tool as an opportunity: since you understand what you need, you may be the best person to create such a tool. You can inspect the code of the existing tools for ideas and techniques, and then build something that works at the level of rule rather than selector. Your chance at fame and fortune! ...well, maybe just fame ;) –  iconoclast May 7 '12 at 17:06
    
@Brandon: this question just hit the ”notable question” mark… so you might be right :-) –  liori Dec 4 '12 at 18:53
add comment

4 Answers 4

Dust Me Selecters Firefox extension

In Chrome's Developer Tools you can use the Web Page Performance tool to find unused CSS rules.

share|improve this answer
    
Great, I'll check it right away! –  liori Mar 4 '11 at 15:54
    
These tools can only remove useless selectors. I clarified my question. –  liori Mar 4 '11 at 16:33
2  
@liori: I don't think this is reliably possible. In your margin example, the second margin rule may seem superfluous but it has higher specificity and could override a later rule. For example, if a class .abc has a different margin, <a class="abc"> would change its margin on hover I think. Now that's probably not what you intend, but it certainly could be, and you can't blindly remove that duplicate rule. –  DisgruntledGoat Mar 9 '11 at 12:41
    
@DisgruntledGoat: I am thinking of a case of a closed world: if it is not specified, it does not exist. So if there is no definitions for a.abc, or there is no <a class="abc"/> anywhere in the HTML, it does not exist.Anyway, I already finished the task that prompted me to ask this question here, and I ended up with applying a lot of heuristics. I tried Chrome's Developer Tools, but they did not help me much. –  liori Mar 9 '11 at 15:02
add comment

You can also take a look at Unused-CSS.com This tool will explore your pages and build an optimized CSS files without the unused selectors

share|improve this answer
add comment

I've always liked CSS Usage. It's a plugin for Firebug and let's you scan the page and see which CSS rules are unapplied. It will even auto-scan and work across several pages.

share|improve this answer
add comment

@John: excellent tool, thanks for the link

@liori: I would also highly recommend the Firefox Web Developer plugin which lets you display the element names/properties, edit the css in real time (doesn't write to your css file) so you can edit and test css changes without the faff of having to save and upload your css ever 3 seconds. + loads more features.

There is also a very nice DOM inspector that plugs into Firebug which also plugs in and is great for sorting out Javascript.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.