css - 检查 CSS 类调用的次数。

Question

我正在考虑编写一个脚本来告诉我：

• 我的 .css 文件中定义的每个 CSS 类在我的代码中使用的频率
• 冗余的 CSS 类 - 从未使用过的类
• 引用了不存在的 CSS 类帽子。

但我只是想确保这样的东西不存在？可以？

谢谢

Answer 1

只是为了好玩，我写了一个。

试试看

首先我们需要找到我们的样式表。在实际脚本中，这会写得更好，但这适用于 jsFiddle。

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

然后删除注释和每个选择器的主体（即括号之间的内容）。这样做是因为 background-image 属性中可能存在 a.com或任何数量的其他问题。我们假设文字字符串中没有 a }，因此会导致问题。

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

感谢谷歌和这个答案，我们可以找到正文中的所有元素，并遍历它们。默认情况下，我们假设我们的 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);