查找不存在的样式引用

Question

是否有一个工具可以找到我在HTML中引用但实际上并不存在的所有css类？

即。如果我有＆lt; ul class =“topnav”/＆gt;在我的HTML中，topnav类在任何引用的CSS文件中都不存在。

这类似于SO#33242，它询问如何查找未使用的CSS样式。这不是重复，因为该问题询问未使用哪些CSS类。这是相反的问题。

Answer 1

您可以将此JavaScript放在可以为您执行此任务的页面中：

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 2

Firefox中的错误控制台。虽然，它会提供所有 CSS错误，因此您必须仔细阅读。

Answer 3

IntelliJ Idea工具也可以。

Answer 4

This Firefox extension完全符合您的要求。

它找到所有未使用的选择器。