你的 CSS 有多大？重复到什么程度？你的 CSS 特异性分数如何？您能否安全地删除一些声明和供应商前缀，如果可以，您如何快速发现它们？在过去的几周里，我们一直致力于重构和清理我们的 CSS，因此，我们偶然发现了一些帮助我们识别重复项的有用工具。因此，让我们回顾其中的一些。
CSS Stats对页面上请求的 CSS 文件进行 B2C 电子邮件列表 全面审核。与许多类似的工具一样，它提供了一个类似于仪表板的规则、选择器、声明和属性视图，以及伪类和伪元素。它还将所有样式分解为组，从布局和结构到间距、排版、字体堆栈和颜色。
特异性分数，使用CSS Stats构建。较低的分数和较平坦的曲线有利于可维护性。（大预览）
CSS Stats 提供的有用功能之一是CSS specificity score，它显示了某些选择器的不必要的具体程度。较低的分数和较平坦的曲线有利于可维护性。
使用的颜色概述，按源代码中的声明顺序打印，带有CSS Stats。（大预览）
它还包括使用的颜色的概述，按声明顺序打印，总声明与唯一声明的分数，以及可以帮助您确定哪些属性可能是创建抽象的最佳候选者的比较图表。这是了解 CSS 中的主要问题所在以及需要关注的内容的良好开端。
跳转后更多！继续往下看↓参加关于前端和 UX的Smashing Workshop，其中包括实用知识、现场会议、视频录制和友好的问答。关于设计系统、用户体验、网络性能和 。与 Brad Frost、Christine Vallaure 和许多其他人一起。
Yellow Lab Tools是一款用于审核 Web 性能的免费工具，但它还包括一些非常有用的帮助工具，可用于衡量 CSS 的复杂性——并且还提供了有关如何解决这些问题的可操作见解。
Yellow Lab Tools突出显示了大量 CSS 问题，以及可操作的建议。（大预览）
该工具会突出显示重复的选择器和属性、旧的 IE 修复、旧的供应商前缀和冗余选择器，以及复杂的选择器和语法错误。显然，您可以深入研究每个部分并研究具体覆盖或重复了哪些选择器或规则。这是发现一些唾手可得的成果并快速解决它们的绝佳选择。
Yellow Lab Tools还会显示重复的选择器以及它们重复的频率，因此您可以立即检查它们。（大预览）
不过，我们可以更深入一点。一旦您进入旧供应商前缀的概览，您不仅可以检查违规者，还可以检查这些前缀适用于哪些浏览器。然后你可以前往你的Browserslist 配置仔细检查你是否没有提供太多的供应商前缀，并在Browssl.ist或通过终端测试你的配置。
CSS 特异性可视化工具
CSS Specificity Visualizer概述了 CSS 选择器及其在 CSS 文件中的特性。提交样式表后，该工具会返回特异性图。 轴显示了选择器在 CSS 中的物理位置，从左到右排列，第一个在左边，最后一个在右边。y 轴显示选择器的实际特异性，从底部最不。