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 — thdoan
– thdoan, Commented Mar 7, 2017 at 5:19

Meligy · Accepted Answer · 2014-04-02 05:47:00Z

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 2, 2014 at 5:47

answered Apr 2, 2014 at 5:11

Meligy

36.7k11 gold badges90 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zero298 · Accepted Answer · 2014-04-02 05:10:09Z

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 2, 2014 at 5:10

zero298

27.1k10 gold badges80 silver badges109 bronze badges

3 Comments

Gajus Over a year ago

Is there a way to access this programmatically?

zero298 Over a year ago

@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

Gajus Over a year ago

True. Website being able to run the audit could be a risk. I am primarily interested in the Chrome DevTools protocol, though. reddit.com/r/javascript/comments/6lvov7/…

Adel · Accepted Answer · 2014-04-02 05:16:57Z

1

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

answered Apr 2, 2014 at 5:16

Adel

1,46815 silver badges18 bronze badges

Comments

alpham8 · Accepted Answer · 2014-04-02 05:10:25Z

-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 2, 2014 at 5:10

alpham8

1,3722 gold badges15 silver badges32 bronze badges

Collectives™ on Stack Overflow

Extract only used css classes from css file

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related