How can I extract only the used CSS on a given web page and have that combined into a separate style sheet?

Question

I have a site whose stylesheets are becoming overwhelming, and a full 50% to 90% or so is not used on certain pages. Rather than have 23 separate blocking CSS sheets, I\'d

Answer 1

How about the CSS Usage plugin for Firebug?

Steps:

1. Visit your page in Firefox
2. Click "CSS Usage" tab in Firebug
3. Click the Scan button
4. Click the bold file name
5. Save page of CSS selectors to disk

Here are some screen shots and walk through. Not sure about media queries or if it'll work on your site, and it'll probably not keep -webkit etc, but maybe it'll get you part of the way there.