How to Identify Unused CSS Definitions from Multiple CSS Files in a Project

Detect unused CSS rules

You can get a general idea with chrome's developer tools.

  1. Open the page in Chrome
  2. Open developer tools (Ctrl+Shift+I)
  3. Open the Audits tab
  4. click run
  5. 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.
enter image description here

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



Leave a reply



Submit