How to show missing CSS classes and properties in Google Chrome?

Question

How can I see what CSS properties are not found/applied by Chrome? (If any other browser can do the trick, I am fine with it. Chrome is my first preference.)

If I have

  <div class="myClass">

and I don't have myClass in my CSS file, I would like Chrome to log an error or warning.

I know about the element inspector which works fine for manually looking at individual elements. I want something that can scan the entire DOM and point out any missing CSS.

Answer 1

There is no such thing as "missing CSS selectors" since you can use classes and IDs for other purposes other than styles.

But you can detect unused CSS rules (as pointed by Berdiya Onur) and you can also do it the other way around and detect classes and IDs that are not used by any CSS rule.

You just need to create a list of the CSS rules (you can do that with document.styleSheets) and compare with a list of all classes and IDs (you can get that using document.querySelectorAll('*')).

In Chrome's Developer tools (F12), go to the Audits tab and run a Web performance test. It will also show which files contain the unused rules.

I did it all in jsbin (look at the JavaScript).