Trouver des références de style qui n'existent pas

Question

Existe-t-il un outil qui me permette de trouver toutes les classes CSS que je référence dans mon HTML et qui n'existent pas réellement?

ie. si j'ai < ul class = "topnav"/> dans mon code HTML et que la classe topnav n'existe dans aucun des fichiers CSS référencés.

Ceci est similaire à SO#33242, qui demande comment trouver les styles CSS inutilisés. Ce n'est pas un doublon, car cette question demande quelles classes CSS ne sont pas utilisées. C'est le problème inverse.

Answer 1

Vous pouvez mettre cette JavaScript dans la page qui peut effectuer cette tâche pour vous:

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

Console d'erreur dans Firefox. Bien, il donne toutes les erreurs CSS, donc vous devez le lire.

Answer 3

IntelliJ Idea outil fait cela aussi bien.

Answer 4

This Firefox extension est pas exactement ce que vous voulez.

Il localise tous les sélecteurs non utilisés.