How to find unused classes in my HTML?

Question

There are lots of tools for finding unused CSS rules in stylesheets, such as Chrome Audits and the Dust-Me Selectors add-on for Firefox (unfortunately not compatible with Firefox Quantum).

But what about the other way around?

How do I find classes that are in my HTML, that do not exist in my stylesheets?

Answer 1

This may be helpful: https://code.google.com/p/find-unused-classes/ . According to the description:

It shows classes that exist in css selectors and do not exist on html page and like-verse.

As Jim said, be warned that some classes may be unused by your stylesheets but still used in JavaScript.

Answer 2

HTML Inspector from https://github.com/philipwalton/html-inspector has this as one of its features:

• Unused Classes: Sometimes you'll remove a CSS rule from your stylesheet but forget to remove the class from the HTML. The "unused-classes" rule compares all the class selectors in the CSS to the classes in the HTML and reports any that aren't being used.

  Classes that are in the HTML as JavaScript hooks can be ignored via a whitelist. By default, any class prefixed with js-, language-, or supports- is whitelisted. More information on the rationale behind this rule can be found here.

In its FAQ you will find a bookmarklet.

Or add it via a script tag:

<script src="http://cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.2/html-inspector.js"></script> 

And run with this snippet:

HTMLInspector.inspect(["unused-classes"]); 

A comment by Andrew Grimm points out that this project is no longer maintained (last commit December 2017). Fortunately it still seems to be functional (tested June 2019).

There is also grunt-unclassify but that project seems dead (last commit December 2014).