Detect unused CSS rules
You can get a general idea with chrome's developer tools.
- Open the page in Chrome
- Open developer tools (Ctrl+Shift+I)
- Open the Audits tab
- click run
- expand the "Remove unused CSS rules" item to view a list of style sheets that contain unused style rules.
This doesn't list them out oh wait... it does... XD
Find unused css
I've been looking for a while, and the best thing I found was this:
http://unused-css.com/
They scan your site and email you the result css.
I am aware you are working on a localsite, however if you find no alternative, you can upload your site somewhere and use this
Alternatively
You could install a previous version of firefox that is compatible with dust-me selectors and run it along side your current installation of firefox.
Is there a tool that tells me if I have unused CSS classes?
Chrome Devtools has a coverage tab which can locate unused CSS and JS.
Each line of code is color-coded:
Solid green means that line of code executed.
Solid red means it did not execute.
A line of code that is both red and green, such as line 3 in Figure 2, means that only some code on that line executed. For
example, a ternary expression like var b = (a > 0) ? a : 0 is
colored both red and green.
Remove unused css from multiple pages at the same time (whole website)
Try "Dust-Me Selectors" add-on for Firefox. It has the ability to crawl, even thru a given sitemap.
I also wish Google Audit had that feature.
How to extract unused CSS/JS (not just purge) into a separate file?
Take a look at https://github.com/pocketjoso/penthouse for extracting the 'critical' CSS for a page, this will then go in your <style type="text/css"></style>
tag.
I'd recommend then including all of your CSS in the CSS file via a link tag. This will mean it's the same on each page and can be cached by the browser.
Related Topics
In Rc.1 Some Styles Can't Be Added Using Binding Syntax
What Do Commas and Spaces in Multiple Classes Mean in Css
Set Opacity of Background Image Without Affecting Child Elements
What Does !Important Mean in Css
How Does Flex-Wrap Work With Align-Self, Align-Items and Align-Content
Does "Display:None" Prevent an Image from Loading
Stopping a Css3 Animation on Last Frame
Is There a CSS Hack to Affect Safari Only Not Chrome
Css3 Background Image Transition
Understanding Z-Index Stacking Order
Why Aren't My Grid-Template-Areas With Ascii Art Not Working
Css Child VS Descendant Selectors
Maintaining the Final State At End of a Css3 Animation
Why Does Minmax(0, 1Fr) Work For Long Elements While 1Fr Doesn'T
Flex-Box: Align Last Row to Grid
Bootstrap Dropdown Sub Menu Missing
Make a Scrollbar Always Visible in a Div - Chrome
How to Scale an Image Proportionally Within a Table Cell of a Fixed Size