Last Updated: February 25, 2016

Count how many css selectors are on a page

Just used this nifty script from: https://gist.github.com/1885511
to count how many CSS selectors were included on a page. Had a harder time googling for it than I should have so hopefully you won't have that issue.

I just dropped this into chrome's console on the page I wanted to check out.

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

#css

#selector