在Google Chrome中显示缺少的CSS

Question

如何查看Chrome未找到/应用的CSS属性？(如果任何其他浏览器可以做到这一点,我很好.Chrome是我的第一选择.)

如果我有

  <div class="myClass">

我的CSS文件中没有myClass,我希望Chrome记录错误或警告.

我知道元素检查器适用于手动查看单个元素.我想要的东西可以扫描整个DOM并指出任何缺少的CSS.

Answer 1

没有"缺少CSS选择器"这样的东西,因为您可以将类和ID用于除样式之外的其他目的.

但是您可以检测未使用的CSS规则(如Berdiya Onur所指出的那样),您也可以反过来检测任何CSS规则未使用的类和ID.

您只需要创建一个CSS规则列表(您可以使用document.styleSheets执行此操作)并与所有类和ID的列表进行比较(您可以使用document.querySelectorAll('*')获得该列表).

在开发人员工具(F12)中,您可以运行转到"审核"选项卡并运行"Web性能测试".它还将显示哪些文件包含未使用的规则.

我在jsbin中做到了这一切,希望你喜欢它(查看JS)!