Donnerstag, 5. Februar 2015

Finden von nicht verwendeten CSS Klassen

Die Fragestellung des Tages: Wie finde ich CSS-Klassen, die im HTML definiert wurden aber nie in Styles verwendet werden?
Die Antwort scheint "fast unmöglich" zu sein. Leider.
Ich habe mal versucht eine Näherung zu finden - der folgende code (angewendet auf eine beliebige Seite in der jQuery geladen ist) listet die im code definierten CSS-Klassen und gleicht diese anschießend mit den in den Styles definierten Selektoren ab:

(function($){
 var classesInUse = {
   _definedProperties: []
  },
  selectorsInUse = {
   _definedProperties: []
  };

 //
 // find all used classes
 //
 $('[class]').each(function(){
  var $this = $(this),
   className = this.className,
   classes = className.split(/\s+/);
  $.each(classes, function(_,c) {
   if(c) {
    //console.log('found a usage of class ' + c);
    if(!classesInUse[c]) {
     classesInUse[c] = {
      elems: [$this]
     };
     classesInUse._definedProperties.push(c);
    } else {
     classesInUse[c].elems.push($this);
    }
   }
  });
 });
 classesInUse._definedProperties.sort();

 $.each(classesInUse._definedProperties, function(_, p){
  console.log('class ' + p + ' was used ' + classesInUse[p].elems.length + ' times in HTML.');
 });
 
 //
 // find all defined css selectors
 // 
 $.each(document.styleSheets, function(_, style) {
  $.each(style.cssRules, function(_, rule) {
   var selector = rule.selectorText;
   if(selector) {
    //console.log('found a definition of css-selector ' + selector);
    if(!selectorsInUse[selector]) {
     selectorsInUse[selector] = {
      count: 1
     };
     selectorsInUse._definedProperties.push(selector);
    } else {
     selectorsInUse[selector].count += 1;
    }
   }
  });
 });
 selectorsInUse._definedProperties.sort();

 $.each(selectorsInUse._definedProperties, function(_, p){
  console.log('selector "' + p + '" was defined ' + selectorsInUse[p].count + ' times in CSS.');
 });
 
 
 //
 // compare classes & selectors
 //
 $.each(classesInUse._definedProperties, function(_, klass){
  var classSelector = '.' + klass,
   usages = 0;
  $.each(selectorsInUse._definedProperties, function(_, cssSelector){
   if(cssSelector.indexOf(classSelector) > -1) {
    usages += 1;
   }
  });
  classesInUse[klass].usagesInCss = usages;
  if(usages === 0) {
   console.log('class ' + klass + ' was not used in CSS!');
  } else {
   console.log('class ' + klass + ' was used in CSS ' + usages + ' times.');
  }
 });
})(jQuery);

Der Code hat natürlich noch diverse Nachteile:

  • Nur das aktuell geladene HTML im DOM wird nach Klassen durchsucht.
  • Nur das aktuell aktive CSS wird nach Selektoren durchsucht.
  • Klassen, die verwendet werden um Elemente einfach im HTML per jQuery auffindbar zu machen werden ggf. als "nicht verwendet" aufgelistet.
Die Ergebnisse sind also mit entsprechender Vorsicht zu verwenden!


Der umgekehrte Fall (Selektoren zu finden, die nicht verwendet werden) scheint übrigens gängiger zu sein: Dafür gibt es tools.

Keine Kommentare:

Kommentar veröffentlichen