How do I optimize my stylesheet by removing unmatched and/or unnecessary CSS selectors

Question

I have inherited a massive stylesheet with many thousand selectors and I'm certain that a good number of them are unnecessary and never actually match elements on the site. In the interests of optimizing, I'd like to remove those orphaned selectors/rules.

Are there any tools that would allow me to compare the CSS against the entirety of the site to identify which selectors are required and which are not?

The site has AJAX components, so writing a curl/wget script to traverse the site and then loop through each selector and grep for a match isn't particularly feasible either (even though that would be kinda fun...)

All suggestions welcomed.

Thanks, JD

Answer 1

There is a Firefox plugin called "Dust-Me Selectors".

https://addons.mozilla.org/en-US/firefox/addon/5392/

"It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered."

It's a fairly manual process but could be what you're looking for.

Answer 2

You can try one of the many online optimizers, like this one:

http://www.cleancss.com/

The Robson Compressor apparently does the best job of combining and removing redundant selectors.

http://iceyboard.no-ip.org/projects/css_compressor

Several of the online optimizers have the ability to remove unused selectors.