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

回答1:

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);
}

回答2:

My project, Bless CSS, could be what you're looking for. It will analyze files and split them at the optimum point based on the selector limit.

It's also built in to CodeKit.

回答3:

There is this bookmarklet that tells you the number of used CSS rules out of the total CSS rules (which you are interested in).

CSS Crunch

回答4:

This will do inline CSS...

var selectors = 0;

$('style').each(function() {

   var styles = $(this).html();

   // Strip comments
   styles = styles.replace(/\/\*.+?\*\//sg, ''); 

   var matches = styles.match(/\{[\s.]*\}/g);

   selectors += matches.length;

});

jsFiddle.

回答5:

Simple algorithm for counting the selectors if you want to do it as part of the build process or simply don't want to do it in JS:

Replace the texts between "{" and "}" with a "," and then calculate the number of ",". This will give you the number of selectors on the file.

回答6:

a bit to late, but for anyone how's looking for a css selector counter: http://snippet.bevey.com/css/selectorCount.php it's very simple, and can work with more than one stylesheet, it even tells you when you hit the 4096 limit

回答7:

Search & replace "{" by "{" in your CSS file. Most editors wil tell how many replacements you’ve done…