Topic: how to detect unused css classes/ids

hello,
i have a css file, which over the years, has grown pretty big. now it contains several classes and ids which are not used anymore and i want to find out which they are. is there a way to automatically do this?

thanks!

You could use a browser supporting or a JS framework replicating querySelectorAll() and go through the selectors in your stylesheets. If a call returns an empty collection, you've got a winner.

Note that you might have to strip the pseudo class of the selectors.



(Edited by poi on 09-20-2008 18:19)

thank you. and which browsers do support that?

That API is quite recent. There isn't many [stable] browser supporting it. The fastest way is certainly to go with jQuery or any similar framework.

AFAIK, Safari 4 dev preview 2 ( webkit 528.1.1 ) supports it. Firefox 3.1 will. I'm not entirely sure about Opera 9.6, it depends when 9.6 was branched out.




(Edited by poi on 09-20-2008 19:17)

Check slickspeed to see if the browsers you have have native support for the selector API.

You could also have a look at the Dust-Me Selectors addon to Firefox. It gives you a nice list of all unused CSS-selectors on a given page.

_________________________
- the Golden Ratio

that's perfect veneficuz. thanks!

Wow, great tool!

I usually just end up rewriting my css from scratch, referencing the original for the stuff I know I need to keep. I too end up with a huge CSS library of classes, (well and with many inconsistencies and problems). Eventually the site is too difficult to manage and add on to (plus I redesign the damn thing once a year it seems).

Karl.