Checking number of times CSS classes called.

Question

I was thinking of writing a script which would tell me:

How often each CSS class defined in my .css file is used in my code
Redundant CSS classes - classes never used
CSS classes hat are referenced that don't exist.

But I just want to make sure something like this doesn't exist already? Does it?

Thanks

I think PhpStorm/WebStorm has a "Find Usages" feature which should be able to locate where they're used and I *think* it will highlight unused classes for simpler projects. Visual Studio might even do the same. — mpen, Aug 16 '13 at 23:44
Many CSS validators can tell you some of the features you are asking for. — Justin D., Aug 16 '13 at 23:55
You can also use Chrome's Audit tool that tells you what classes are being used in the current page. Or, CSS Usage for Firebug. — shriek, Aug 16 '13 at 23:59
If you did want to write one, use a HTML parser to extract class attributes, split on spaces, and count occurances. For CSS, remove comments, replace `\{[^}]*\}` with `,`, match `\.(\w+)`, and you have your class selectors. You can then figure out which class selectors are used in HTML vs CSS. — Brigand, Aug 17 '13 at 00:06

score 1 · Accepted Answer · edited May 23 '17 at 12:20

Just for fun, I wrote one.

try it

First we need to find our style sheet. In an actual script, this would be written better, but this works on jsFiddle.

var styles = document.head.getElementsByTagName('style');
var css = styles[styles.length - 1].innerHTML;

Then remove comments, and the bodies of each selector (i.e. the stuff between the brackets). This is done because there could be a .com in a background-image property, or any number of other problems. We assume there isn't a } in a literal string, so that would cause problems.

var clean = css.replace(/\/\*.*?\*\//g, '').replace(/\{[^}]*\}/g, ',');

We can find classes with regular expressions, and then count how many of them occur.

var re_class = /\.(\w+)/g;
var cssClasses = {},  match, c;
while (match = re_class.exec(clean)) {
    c = match[1];
    cssClasses[c] = cssClasses[c] + 1 || 1;
}

I used jsprint for displaying our findings. This shows how many times each class is mentioned in our CSS.

jsprint("css classes used", cssClasses);

Thanks to Google and this answer we can find all elements in the body, and loop through them. By default, we assume no classes were used in our HTML, and all classes used were defined.

var elements = document.body.getElementsByTagName("*");
var neverUsed = Object.keys(cssClasses);
var neverDefined = [];
var htmlClasses = {};

We get each elements class, and split it on the spaces.

for (var i=0; i<elements.length; i++) {
    var e = elements[i];
    var classes = (e.className || "").split(" ");

This is a three dimensional loop, but it works nicely.

    for (var j=0; j<classes.length; j++) {
        for (var k=0; k<neverUsed.length; k++) {

We thought classes[j] was never used, but we found a use of it. Remove it from the array.

            if (neverUsed[k] === classes[j]) {
                neverUsed.splice(k, 1);
            }
        }

It looks like we found a class that doesn't appear in our CSS. We just need to make sure it's not an empty string, and then push it onto our array.

        if (classes[j].length && cssClasses[classes[j]] == null) {
            neverDefined.push(classes[j]);
        }

Also count the number of times each class is used in HTML.

        if (classes[j].length) {
            htmlClasses[classes[j]] = htmlClasses[classes[j]] + 1 || 1;
        }
    }
}

Then display our results.

jsprint("html class usage", htmlClasses);
jsprint("never used in HTML", neverUsed);
jsprint("never defined in CSS", neverDefined);

Doesn't work. Why is it saying `a` was used once when it is not :/ — Si8, Nov 12 '14 at 14:40

Checking number of times CSS classes called.

1 Answers1

try it