Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Count the number of rules and selectors for CSS files on the page. Flags up the >4096 threshold that confuses IE. — This snippet has been modified to count more than just the first level of CSSStyleRule objects within CSSMediaRule.
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) {
if (sheet.cssRules[j].cssRules) {
for (var m = 0, n = sheet.cssRules[j].cssRules.length; m < n; m++) {
if(sheet.cssRules[j].cssRules[m].selectorText) {
count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length;
}
}
}
}
else {
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();
@krisbulman

This comment has been minimized.

Copy link
Owner Author

commented Aug 26, 2014

kudos to labue for this addition

@dkeeghan

This comment has been minimized.

Copy link

commented Sep 16, 2014

Suggest wrapping a check around line 17:

if(sheet.cssRules[j].cssRules[m].selectorText) {
    count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length;
}

This avoids any "TypeError: Cannot read property 'split' of undefined" errors.

Updated code:

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) {
                    if (sheet.cssRules[j].cssRules) {
                        for (var m = 0, n = sheet.cssRules[j].cssRules.length; m < n; m++) {
                            if(sheet.cssRules[j].cssRules[m].selectorText) {
                                count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length;
                            }
                        }
                    }
                }
                else {
                    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();
@krisbulman

This comment has been minimized.

Copy link
Owner Author

commented Oct 31, 2014

Nice, thanks! (updated gist)

@chibicode

This comment has been minimized.

Copy link

commented Nov 18, 2014

For anyone looking for a Grunt script: (see maxSelectors)
https://github.com/phamann/grunt-css-metrics

@krisbulman

This comment has been minimized.

Copy link
Owner Author

commented Feb 23, 2015

Above grunt module is no longer maintained. phamann/grunt-css-metrics#10

@bkiener

This comment has been minimized.

Copy link

commented Oct 27, 2018

It ignores the import rule. In case one needs to known the total count of rules including the imported rules, here the modified script:

(function countCSSRules() {
    var log = '',
		listOfImportRules = [],
		totalRules = 0,
		totalSelectors = 0;
    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] instanceof CSSImportRule) {
					listOfImportRules.push(sheet.cssRules[j].styleSheet);
				} else if (!sheet.cssRules[j].selectorText) {
                    if (sheet.cssRules[j].cssRules) {
                        for (var m = 0, n = sheet.cssRules[j].cssRules.length; m < n; m++) {
                            if(sheet.cssRules[j].cssRules[m].selectorText) {
                                count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length;
                            }
                        }
                    }
                }
                else {
                    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--------------------------';
			totalRules += sheet.cssRules.length;
			totalSelectors += count;
        }
		
		if(listOfImportRules.length > 0) {
	        countSheet(listOfImportRules.shift());
		}
		
    }
    console.log(log);
    console.log("Total Rules: "+ totalRules + "  Total Selectors: " + totalSelectors);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.