7

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

Jonathan Day
  • 18,519
  • 10
  • 84
  • 137
  • I would recommend using a "CSS compiler" such as SASS or LESS or whatever. While these don't "optimize", I find the tree-structure they allow often allows for *me to write better CSS selectors* as they help to organize and split the CSS into better logical units. –  Nov 03 '10 at 04:40
  • thanks @pst, I'll check it out. it probably doesn't help in the case of inheriting legacy CSS though, right? – Jonathan Day Nov 03 '10 at 04:59
  • Often I would rather spend a few hours (or days) getting a code-base usable than months slogging through it being confused :-) SASS [in SCSS mode] and LESS both accept valid CSS grammar so you can change the CSS incrementally. –  Nov 03 '10 at 05:37

3 Answers3

2

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.

rsturim
  • 6,756
  • 15
  • 47
  • 59
1

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.

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
  • Thanks @robert, it looks like it will remove selectors that are redundant because another selector in the stylesheet already matches that element, but I want it to compare my stylesheet against the rendered (X)HTML and tell me which selectors have no match in the HTML... – Jonathan Day Nov 03 '10 at 05:00
0

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

Gajendra Bang
  • 3,593
  • 1
  • 27
  • 32
  • I don't see an extension at that link, am I missing something? – Jonathan Day Nov 09 '10 at 08:12
  • it is somewhere in that article but here the link for you https://addons.mozilla.org/en-US/firefox/addon/10704/ remember, it is an extension for firebug so please install the firebug if you don't have it – Gajendra Bang Nov 09 '10 at 08:17