Extract only used css classes from css file

Question

I'm working on an upgrade for our current application (asp.net mvc). Here my problem is, I have a existing css file name "styles.css". Now this file has lots of css classes and they are used in different pages.

Now as a part of the upgrade process, this css file will not be used anymore. But I still want certain css classes from this file, so that I can copy them to a new file and include it in my pages.

Any ideas on how to extract these styles which are used in my new pages. And yes the styles which I want to pick are already set to the controls in the page. Please help.

Answer 1

Finding ones that are used in single page should be easy with multiple tools. One good tool is called UnCSS.

The trick is checking an entire site where CSS file is shared accross pages.

This approach was popular in social networks recently with some high profile guys sharing it like Google's Addy Osmani and some Google Chrome guys:

http://addyosmani.com/blog/removing-unused-css/

Answer 2

There are a lot of ways, for example:

• Firefox plugin, this will extract the used css https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

• for chrome https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh?hl=en-GB

• Manually: another way in the chrome (or other browsers), right click and select inspect element, this will show you the hierarchis which is working on specific element, by that you can take your used css

• You can find the unsed css from the following tool, so that you can clean your css to have pure one http://unused-css.com/ or http://www.pontikis.net/blog/remove-unused-css

Answer 3

Use a Browser Debugger, click on the elements on site and see on the right corner which classes are machtes and copy them.

Answer 4

Use Chrometools Audits

In Chrome Press: F12 -> Audits -> Run

It will let you know what is and is not used.