Extracting only the css used in a specific page

Say you had a dynamically generated site that has been worked on by too many people, past and present, and you now have a collection of shared stylesheets that contain over 20,000 lines of CSS. It isn't organized at all, there are some class and id-based selectors but also way too many tag-based selectors. And then say you have 100 templates that use these styles, via some controller.

Is there a tool, something that works like Firebug perhaps, that you can point at a url and it would determine all of the applicable CSS selectors for that page and dump them to a file? Basically some way to rip apart the shared stylesheets on a page by page basis.

Solution 1:

Hands down the best tool that actually does exactly what you want by only getting the used CSS on the page and allows you to simply copy it to your clipboard is this Chrome extension CSS Used

Pretty Picture Example

Solution 2:

I've used Dust-Me Selectors before, which is a Firefox plugin. It's very easy to use and versatile as it maintains a combined list across a number of pages of which CSS values are used.

The downside is that I wasn't able to automate it to spider an entire site, so I ended up using it just on key pages/templates of my site. It is very useful nonetheless.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Contrary to the comment above Dust-Me Selectors 2.2 is compatible with Firefox 3.6 (I've just installed it).

Solution 3:

These look promising:

• Unused-CSS.com -- Service that spiders your website and emails you the results
• CSS Usage -- Firebug addon