从旧的css文件生成新的css，该文件仅包含使用Javascript的所需选择器

Question

我有超过2000行的css文件。 有没有办法创建将解析html的mini js函数，只从这个.css文件中获取所需的选择器并生成新的css？

Answer 1

使用IE9（更强大的StyleSheet DOM）。 在JavaScript控制台中运行此脚本：

var used = [], unused = [];
[].forEach.call(document.styleSheets, function (ss) {
    [].forEach.call(ss.cssRules, function (r) {
        if (document.querySelector(r.selectorText)) {
            used.push(r);
        } else {
            unused.push(r);
        }
    });
});
console.log("Selectors that exist in this page: " + used.length);
console.log("Selectors that do not exist in this page: " + unused.length);

used.map(function (rule) {
    return rule.cssText;
}).join("\n");

它将在控制台中仅打印给定页面所需的规则。

Answer 2

不是一个js解决方案，但你检查了尘土我 ？

从网站：

它从您正在查看的页面上的所有样式表中提取所有选择器，然后分析该页面以查看哪些选择器未被使用。 然后存储数据，以便在测试后续页面时，选择器可以在遇到它们时从列表中划掉。

您可以单独测试页面，也可以蜘蛛整个站点，最终您将获得一个不在任何地方使用哪些选择器的配置文件。

但是，它不适用于Firefox 8 :(

这是一个javascript解决方案。 我没试过这个，但是Dust Me过去曾为我做过这个伎俩。