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

Posted 2023-03-06

【中文标题】获取代码中使用的所有 CSS 类选择器，这些选择器没有定义 CSS 规则集 [关闭]

【英文标题】：Get all CSS class selectors used in code, which doesn't have CSS ruleset defined [closed]

【发布时间】：2018-07-30 18:35:10

【问题描述】：

如何列出我在整个代码中使用的所有 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：我有初步答案可以帮助我开始。并非在所有情况下都有效，但在一定程度上有效。

【问题讨论】：

Is there a way to check which CSS styles are being used or not used on a web page?的可能重复

我正在寻找相反的情况。我没有定义 CSS 类（因为我删除了旧库），我的代码正在使用它。我需要一种方法来找出缺失的定义。

我怎样才能改写这个问题，以使其清楚？

这是一个与 CSS 使用相关的有效问题。我不是要任何书、软件库或插件。也不是教程请求。

关闭为什么？显然 CSS 问题仅限于诸如如何使用 CSS 绘制具有 11 个花瓣的花朵之类的问题，并且很受欢迎。

【参考方案1】：

这对我有用！

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 === Cs-s-rule.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);

打开您的网站后运行它！您将了解缺少 CSS 规则的 CSS 规则列表。感谢您的提示，@SalmanA

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

【参考方案2】：

试试这个

:not([class])

这只会选择所有没有分配 css 类的类。

【讨论】：

这将给我所有没有给它类名的元素。我想你误解了这个问题。

我怎样才能改写这个问题，以使其清楚？

废话，我很抱歉没有用。希望你能尽快找到答案