Menu
Say you had a dynamically generated site that has been worked on by too many people, past and present, and you now have a collection of shared stylesheets that contain over 20,000 lines of CSS. It isn't organized at all, there are some class and id-based selectors but also way too many tag-based selectors. And then say you have 100 templates that use these styles, via some controller.
Is there a tool, something that works like Firebug perhaps, that you can point at a url and it would determine all of the applicable CSS selectors for that page and dump them to a file? Basically some way to rip apart the shared stylesheets on a page by page basis.
770
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.
On Chrome's Developer Tools tab (CTRL + SHIFT + I), go to Resources (you may have to enable Resource tracking on that page), and click on the sub-tab Stylesheets. That will show all css files loaded by that page.
😬 Looking at “coverage”Chrome's DevTools has a “Coverage” tab that will tell you how much of your CSS and JavaScript is in use. For example, if I visit the homepage of CSS-Tricks right now… It tells me that 70.7% of my style. css file is unused.
Open up the webpage and click File-> Save Page As... and from that prompt select "Web Page, Complete" . Once you've saved this page this downloads a complete version of the html, javascript, css files and images that are referenced in the HTML.
Hands down the best tool that actually does exactly what you want by only getting the used CSS on the page and allows you to simply copy it to your clipboard is this Chrome extension CSS Used
Pretty Picture Example
136
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
