CODEWITHSUNDEEP
cssoptimizationcss-selectorsorphan
Jonathan Day
Jonathan Day

Reputation: 18692

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

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

Upvotes: 7

Views: 728

Answers (3)

Gajendra Bang
Gajendra Bang

Reputation: 3583

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

In my opinion better than dust-me selectcor

Upvotes: 0

rsturim
rsturim

Reputation: 6846

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.

Upvotes: 2

Robert Harvey
Robert Harvey

Reputation: 180777

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.

Upvotes: 1

Related Questions