Проверка количества вызовов классов CSS.

Ради интереса я написал одну.

попробуйте

Сначала нам нужно найти нашу таблицу стилей. В реальном скрипте это было бы лучше написано, но это работает на jsFiddle.

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

Затем удалите комментарии и тела каждого селектора (то есть содержимое в скобках). Это сделано, потому что может быть .com в свойстве фонового изображения или любое количество других проблем. Мы предполагаем, что в буквальной строке нет }, поэтому это может вызвать проблемы.

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

Мы можем найти классы с регулярными выражениями, а затем посчитать, сколько из них встречается.

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

Я использовал jsprint для отображения наших результатов. Это показывает, сколько раз каждый класс упоминается в нашем CSS.

jsprint("css classes used", cssClasses);

Благодаря Google и этому ответу мы можем найти все элементы в теле и просмотреть их в цикле. По умолчанию мы предполагаем, что в нашем HTML не использовались никакие классы, а все используемые классы были определены.

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

Мы получаем каждый класс элементов и разбиваем его на пробелы.

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

Это трехмерный цикл, но он отлично работает.

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

Мы думали, что classes[j] никогда не использовался, но мы нашли ему применение. Удалите его из массива.

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

Похоже, мы нашли класс, которого нет в нашем CSS. Нам просто нужно убедиться, что это не пустая строка, а затем поместить ее в наш массив.

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

Также посчитайте, сколько раз каждый класс используется в HTML.

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

Затем покажите наши результаты.

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