Last Updated: February 25, 2016
·
657
· mbillard

Script to count CSS rules & selectors

Drop the following into the developer console:

function countCSSRules() {
  var results = '',
    log = '';
  if (!document.styleSheets) {
    return;
  }
  for (var i = 0; i < document.styleSheets.length; i++) {
    countSheet(document.styleSheets[i]);
  }
  function countSheet(sheet) {
    var count = 0;
    if (sheet && sheet.cssRules) {
      for (var j = 0, l = sheet.cssRules.length; j < l; j++) {
        if( !sheet.cssRules[j].selectorText ) continue;
        count += sheet.cssRules[j].selectorText.split(',').length;
      }

      log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
      log += '\nRules: ' + sheet.cssRules.length;
      log += '\nSelectors: ' + count;
      log += '\n--------------------------';
      if (count >= 4096) {
        results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
      }
    }
  }
  console.log(log);
  console.log(results);
};
countCSSRules();

...and you will receive a well formatted summary of your CSS file.

File: http://www.example.dev/assets/application.css
Rules: 2101
Selectors: 2612
--------------------------
File: inline <style> tag
Rules: 1
Selectors: 1
--------------------------
File: inline <style> tag
Rules: 69
Selectors: 84
--------------------------

Taken from @keferboeck at https://github.com/zweilove/css_splitter/issues/29#issuecomment-40775962