Find style references that don't exist

Question

Is there a tool that will find for me all the css classes that I am referencing in my HTML that don't actually exist?

ie. if I have <ul class="topnav" /> in my HTML and the topnav class doesn't exist in any of the referenced CSS files.

This is similar to SO#33242, which asks how to find unused CSS styles. This isn't a duplicate, as that question asks which CSS classes are not used. This is the opposite problem.

Answer 1

Visual Studio 2008 SP 1 :)

Answer 2

Error Console in Firefox. Although, it gives all CSS errors, so you have to read through it.

Answer 3

IntelliJ Idea tool does that as well.

Answer 4

You can put this JavaScript in the page that can perform this task for you:

function forItems(a, f) {
  for (var i = 0; i < a.length; i++) f(a.item(i))
}

function classExists(className) {
  var pattern = new RegExp('\\.' + className + '\\b'), found = false

  try {
    forItems(document.styleSheets, function(ss) {
      // decompose only screen stylesheets
      if (!ss.media.length || /\b(all|screen)\b/.test(ss.media.mediaText))
        forItems(ss.cssRules, function(r) {
          // ignore rules other than style rules
          if (r.type == CSSRule.STYLE_RULE && r.selectorText.match(pattern)) {
            found = true
            throw "found"
          }
        })
    })
  } catch(e) {}


  return found
}

Answer 5

This Firefox extension is does exactly what you want:

http://www.sitepoint.com/dustmeselectors/

It locates all unused selectors.