Question

如何列出我在整个代码中使用的所有CSS类，没有为其定义的“CSS规则集”？

像

这样的东西

/*Definition (or Rule set) for .some-random-class 
doesn't exist or is commented out like below

.some-random-class {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

*/

.known-class {
  background-color: red;
  width: 100px;
  height: 100px;
}

<div class="some-random-class">
  <span class="known-class"/>
</div>

我希望getAllUndeclaredCSS()之类的内容能够作为答案返回['some-random-class']。

更新1 ：这与“正在检查正在使用的CSS样式”不同，因为定义不存在，但用法存在

更新2 ：我有初步答案帮助我开始。在所有情况下都不起作用，但在某种程度上有效。

Answer 1

这对我有用！

＆＃13;

let elementsWithClass = document.querySelectorAll("[class]");
let classNames = new Set();
elementsWithClass.forEach(node =>
    node.classList.forEach(item => classNames.add(item))
);

let stylesheets = document.styleSheets;
let definitionsFound = new Set();
for (i = 0; i < stylesheets.length; i++) {
    rules = stylesheets[i].cssRules;
    for (j = 0; j < rules.length; j++) {
        if (rules[j].type === CSSRule.STYLE_RULE) {
            let match = rules[j].selectorText.match(/\.[^\.: ]+?(?=\.| |$|:)/g);
            match && match.forEach(item => definitionsFound.add(item.replace(".", "")));
        }
    }
}

let missingDefs = [];
classNames.forEach(item => {
    if (!definitionsFound.has(item)) {
        missingDefs.push(item);
    }
});
console.log(missingDefs);

＆＃13;

打开网站后运行此操作！您将了解缺少css规则的CSS规则列表。感谢小费，@ SalmanA

PS：如果您运行的是不支持Set的旧浏览器，请将其更改为数组并过滤掉重复项。

Answer 2

试一试

:not([class])

这将只选择没有分配给它们的css类的所有类。

获取代码中使用的所有CSS类选择器，这些选择器没有定义CSS规则集

2 个答案: