visit-css-rules.js

(function () {

  // visit all stylesheets on the page

  var styleSheets = document.styleSheets,
      len = styleSheets.length,
      used = 0,
      unused = 0,
      totalUsed = 0,
      totalUnused = 0;
    
  function visitCssRules(styleSheet) {
    
    var cssRules = styleSheet.cssRules,
        len = cssRules.length,
        selectorText;
		
    console.log('rules defined in stylesheet: %s', len);
	
    /* 
     * The for-loop will print out yellow lines if the rule is used.  You can un-comment 
     * the “not used” line to see the all the rules.
     */

    for (var i = 0; i < len; ++i) {
    
      // try-catch needed in those cases where pseudo: element rules are used.
      try {

        selectorText = cssRules[i].selectorText;    

        if (document.querySelectorAll(selectorText).length > 0) {
          totalUsed = totalUsed + 1;
          used = used + 1;
          console.log('using: %s', selectorText);
        } else {
          totalUnused = totalUnused + 1;
          unused = unused + 1;
          console.warn('not used: %s', selectorText);
        }

      } catch (err) {
        console.log('bad rule? %s', err);
      }
    }

    selectorText = null;
  };

  for (var i = 0; i < len; ++i) {
    visitCssRules(styleSheets[i]);
    console.log('***stylesheet %s***: ', i);
    console.log('* using: %s', used);
    console.warn('* unused: %s', unused);
    used = unused = 0;
  }

  console.log('total used: %s', totalUsed);
  console.warn('total unused: %s', totalUnused);	

}());