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.

Possible duplicate of [Extracting only the css used in a specific page](http://stackoverflow.com/questions/4867005/extracting-only-the-css-used-in-a-specific-page) — thdoan, Mar 07 '17 at 05:19

Meligy · Answer 1 · 2014-04-02T05:47:00.090

10

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/

edited Apr 02 '14 at 05:47

answered Apr 02 '14 at 05:11

Meligy

35,654
11
85
109

score 6 · Answer 2 · answered Apr 02 '14 at 05:10

6

Use Chrometools Audits

In Chrome Press: F12 -> Audits -> Run

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

Chrome Audits

answered Apr 02 '14 at 05:10

zero298

25,467
10
75
100

Is there a way to access this programmatically? – Gajus Jul 07 '17 at 18:18
@Gajus from what context? Do you mean as a browser extension or as an external website accessed by the client? I am somewhat hopeful that a website I access cannot run an audit on my machine without my permission. If from an extension context, I believe so. See: [chrome.experimental.devtools.audits](https://developer.chrome.com/extensions/experimental_devtools_audits) – zero298 Jul 07 '17 at 18:24
True. Website being able to run the audit could be a risk. I am primarily interested in the Chrome DevTools protocol, though. https://www.reddit.com/r/javascript/comments/6lvov7/how_to_use_the_chrome_devtools_protocol_to/ – Gajus Jul 07 '17 at 18:43

score 1 · Answer 3 · answered Apr 02 '14 at 05:16

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

score -1 · Answer 4 · answered Apr 02 '14 at 05:10

-1

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

answered Apr 02 '14 at 05:10

alpham8

1,314
2
14
32

Extract only used css classes from css file

4 Answers4