Menu
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.
511
Open Chrome DevTools. Open the command menu with: cmd + shift + p. Type in "Coverage" and click on the "Show Coverage" option. Select a CSS file from the Coverage tab which will open the file up in the Sources tab.
If you open the "Computed" section, you can see the final style that is applied, after all the rules from various CSS selectors have been applied. And you can open up any specific attribute to find out which CSS selector and file is responsible.
Install "eXtract Snippet"=> Inspect an element using chrome's developer tools 'inspect element'. Within the developer tools you should also see a panel named "eXtract HTML CSS". Click on to the "eXtract HTML CSS" panel and further click onto the "Get HTML/CSS of inspected element" button withing the panel.
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/
196
Use Chrometools Audits
In Chrome Press: F12 -> Audits -> Run
It will let you know what is and is not used.
36
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
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
