20 lines of code implementation of a CSS coverage test script _javascript Tips

Document.stylesheets holds a collection of all the CSS rules on the current page. It allows you to traverse all selector defined in the page <style>, and access the matching rules for the Selectortext property to the selector. The rule rule is then passed to the Document.queryselectorall to get a list of elements within the page that match this rule.
Here we just ask for the coverage of the CSS rules, so we can access Queryselectorall (). length. You can see each CSS usage by sorting.
The code is simple.

Copy Code code as follows:

var usage = [];
var sheets = document.stylesheets;

for (var i = sheets.length-1 i!=-1; i--) {
var rules = Sheets[i].rules;

for (var j = rules.length-1 J!=-1; j--) {
var rule = rules[j];
var text = Rule.selectortext;

Usage.push ({name:text, count:document.querySelectorAll (text). length});
}
}
Usage.sort (function (A, b) {return a.count-b.count});

for (var i = usage.length-1 i!=-1; i--) {
Console.log ("selector:" + usage[i].name + "\n\t Match number:" + usage[i].count);
}

Exhale the F12, stick the code in the console and enter.

Of course, due to permissions issues, the external import of CSS can not be accessed in any case, for the time being not considered. As for not supporting the stylesheets of the broken ie, you can consider using expression or BEHAVIOUR.HTC, another day to try.
Pure JS implementation on this. In the future with the local program to achieve external CSS analysis.

By the way, put a test result:

Which CSS is useless to a glance:

Of course, a 0 match doesn't mean it's useless. The most typical example is: hover, only the mouse to move up to match. There are also through classname control, [attr=], #动态ID, dynamic elements .... And so on and so on the style is not easy to match to.

So the meaning of the above code is not large, and the current mainstream browsers are built-in profiles function, and can be real-time tracking selector matching element number, so do an IE version of only some significance: