How to optimize my stylesheet by removing unsurpassed and / or unnecessary CSS selectors

Question

I have inherited a massive style sheet with many thousands of selectors, and I’m sure that many of them are not needed and never correspond to elements on the site. In the interest of optimization, I would like to remove these orphan selectors / rules.

Are there any tools that would allow me to compare CSS with the whole site to determine which selectors are needed and which are not?

The site has AJAX components, so writing a curl / wget script to move around the site and then looping through each selector and grep to match is not particularly feasible (although that would be interesting ...)

All suggestions are welcome.

Thanks JD

Answer 1

There is a Firefox plugin called "Dust Selectors".

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

"He extracts all the selectors from all the stylesheets on the page you are viewing, then analyzes this page to see which of these selectors is not used. Then the data is saved, so that when testing subsequent pages, the selectors may be encountered."

This is a fairly manual process, but it may be what you are looking for.

Answer 2

You can try one of many online optimizers, for example:

http://www.cleancss.com/

The Robson Compressor seems to do the best job of combining and removing redundant selectors.

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

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

Answer 3

check CSS coverage (extension for Firebug) http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/

In my opinion, better than a vacuum cleaner