csscss-selectorshamlsasscompass-sass

Count number of selectors in a css file


is there an existing plugin/app/program/script/whatever that analyzes and counts the css selectors of a file? i want to check if the reason my css file is not working in IE is because my selector count is over 4095 (which im pretty sure is not)

thanks!

p.s. plus points if there's a haml/sass/compass solution


Solution

  • The following snippet can be run in the Firebug console in Firefox to count the total number of CSS selectors (not just CSS rules) and check whether it reaches the limit of 4095 selectors per stylesheet:

    var
      styleSheets = document.styleSheets,
      totalStyleSheets = styleSheets.length;
    
    for (var j = 0; j < totalStyleSheets; j++){
      var
        styleSheet = styleSheets[j],
        rules = styleSheet.cssRules,
        totalRulesInStylesheet = rules.length,
        totalSelectorsInStylesheet = 0;
    
      for (var i = 0; i < totalRulesInStylesheet; i++) {
        if (rules[i].selectorText){
          totalSelectorsInStylesheet += rules[i].selectorText.split(',').length;
        }
      }
      console.log("Stylesheet: "+styleSheet.href);
      console.log("Total rules: "+totalRulesInStylesheet);
      console.log("Total selectors: "+totalSelectorsInStylesheet);
    }