CSS审核工具

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

CSS 审核并非开发者日常工作中的常见任务，但有时却不得不做。例如，为了进行性能评估，找出关键 CSS 并减少未使用的选择器；又或许是为了提升代码的可访问性，评估代码库中所有颜色的对比度；甚至可能是为了确保代码的一致性！

无论如何，每当需要审核CSS时，我通常都会用到本文中介绍的一些工具。但在此之前，我们先来看看“审核”CSS究竟是什么意思。

审核 CSS 很困难

通常，代码审计是指分析代码以查找错误或其他异常情况，例如可能的性能问题。对于大多数编程语言来说，代码审计的概念相对简单：要么有效，要么无效。但 CSS 是一种特殊的语言，浏览器通常会忽略其错误。此外，实现相同样式的方法有很多种。这使得 CSS 的审计变得相当棘手。

使用你常用的代码编辑器扩展程序或设置代码检查器或许可以避免发现这些错误。但这并非我在此想要展示的重点，而且这还远远不够。我们仍然可能使用过多的颜色、字体定义或 z-index 值，所有这些都可能导致 CSS 代码库混乱、难以维护且不稳定。

要真正审核 CSS，我们需要深入挖掘，找出不符合最佳实践的地方。为了找到这些地方，我们可以使用以下工具。

浏览器开发者工具

我们来看看 Chrome 开发者工具中的 CSS 审核工具。我这里使用的是基于 Chromium 内核的 Brave 浏览器。你可能还会对Umar Hansa 的这篇文章感兴趣，他汇总了 2020 年发布的一系列优秀的开发者工具功能。

如果您喜欢手动检查 CSS 代码，可以使用“检查”工具。通过该工具，我们可以查看应用于特定元素的 CSS 代码。使用“检查箭头”，我们甚至可以查看有关颜色、字体、大小和辅助功能等更多详细信息。

网格和柔性检查器

开发者工具界面中有很多实用功能，但我最喜欢的是网格和弹性检查器。要启用它们，请转到设置（开发者工具右上角的小齿轮图标），点击“实验”，然后启用 CSS 网格和弹性盒调试功能。虽然这个工具主要用于调试布局问题，但我有时也会用它来快速判断页面上是否使用了 CSS 网格或弹性盒。

CSS概述

检查 CSS 非常基础，所有操作都需要手动完成。接下来我们来看看开发者工具的一些更高级的功能。

CSS 概览就是其中之一。要启用 CSS 概览工具，请转到“设置”，点击“实验”，然后启用“CSS 概览”选项。要打开 CSS 概览面板，您可以使用快捷键CMD+ Shift+ P，输入“css overview”，然后选择“显示 CSS 概览”。此工具会汇总 CSS 属性，例如颜色、字体、对比度问题、未使用的声明和媒体查询。我通常使用此工具来“感受”CSS 代码的质量。例如，如果存在“五十度灰”或过多的排版定义，则意味着样式指南没有得到遵守，或者可能根本没有样式指南。

请注意，此工具汇总的是应用于特定页面的样式，而不是应用于整个文件的样式。

覆盖范围

代码覆盖率工具显示页面上使用的代码量和代码百分比。要查看代码覆盖率，请使用快捷键CMD“++ Shift” P，输入“coverage”，选择“显示代码覆盖率”，然后单击“刷新”图标。

您可以通过在 URL 筛选器输入“.css”来筛选出 CSS 文件。我通常使用这个工具来了解网站的加载方式。例如，如果我发现覆盖率很高，我就可以推断 CSS 文件是为每个页面单独生成的。虽然这可能不是关键数据，但有时有助于理解缓存策略。

渲染面板

“渲染”面板是另一个实用工具。要打开“渲染”面板，再次使用CMD“++ Shift”键P，这次输入“渲染”，然后选择“显示渲染”选项。此工具有很多选项，但我最喜欢的是：

• 闪烁渲染——当发生重绘事件时，会显示绿色矩形。我用它来识别渲染时间过长的区域。
• 布局偏移区域——当发生布局偏移时，会显示蓝色矩形。为了充分利用这些选项，我通常会在“网络”选项卡下设置“慢速 3G”预设。我有时会录制屏幕视频，然后减慢视频播放速度来查找布局偏移。
• 帧渲染统计信息——显示GPU和帧的实时使用情况。此工具在识别复杂动画和滚动问题时非常有用。

这些工具并非常规审核所包含的内容，但我认为了解 CSS 代码是否高效且不会消耗设备电量至关重要。

其他选项可能更有利于调试问题，例如模拟和禁用各种功能、强制使用prefers-color-scheme特定功能或打印媒体类型以及禁用本地字体。

性能监视器

另一个用于审核 CSS 性能代码的工具是性能监视器。要启用它，请再次使用CMD+ Shift+ P，输入“性能监视器”，然后选择“显示性能监视器”选项。我通常使用此工具来查看与页面交互或动画播放时触发了多少次重新计算和布局。

绩效小组

性能面板详细显示了页面加载期间的所有浏览器事件。要启用性能工具，请按CMD+ Shift+ P，输入“性能”，选择“显示性能”，然后单击“重新加载”图标。我通常会启用“屏幕截图”和“Web 关键指标”选项。我最感兴趣的指标是首次绘制、首次内容绘制、布局偏移和最大内容绘制。此外，还有一个饼图显示了绘制和渲染时间。

DevTools 可能不被认为是传统的审计工具，但它可以帮助我们了解使用了哪些 CSS 功能、代码的效率以及它的性能——所有这些都是审计的关键内容。

在线工具

DevTools 只是众多功能强大的工具之一。但我们还可以使用其他工具来审核 CSS。

特异性可视化工具

特异性可视化工具可以显示代码库中 CSS 选择器的特异性。只需访问该网站并粘贴 CSS 代码即可。

主图表展示了样式表中不同位置对应的选择器优先级。另外两个图表则展示了优先级的使用情况。我经常使用这个网站来查找“不好的”选择器。例如，如果我看到很多优先级被标记为红色，我很容易就能得出结论：代码还有改进的空间。在改进代码的过程中，保存截图以供参考会很有帮助。

CSS 特异性图表生成器

CSS 特异性图表生成器是一个类似的工具，用于可视化 CSS 选择器的特异性。它显示的图表略有不同，可以帮助您了解 CSS 选择器按特异性排列的方式。正如该工具页面所述，“峰值过高是不好的，总体趋势应该是样式表后面的优先级更高。” 对此进行更深入的探讨会很有意思，但这超出了本文的范围。不过，Harry Roberts 在他的文章《特异性图表》中对此进行了详尽的阐述，值得一读。

CSS 统计数据

CSS Stats是另一款可以为样式表提供分析和可视化功能的工具。事实上，Robin前段时间写过一篇关于它的文章，并展示了他如何用它来审核工作中的样式表。

您只需输入网站 URL 并点击即可Enter。信息会按类别分成多个部分，包括声明数量、颜色、字体、z-index、优先级等等。建议您保存屏幕截图以备后用。

华莱士计划

Project Wallace由 Bart Veneman 开发，他之前已经在 CSS-Tricks 上介绍过这个项目。Project Wallace 的强大之处在于它能够基于导入比较和可视化代码变更。这意味着你可以查看 CSS 代码库之前的状态，并了解代码在不同状态之间的变化。我发现这个功能非常实用，尤其是在你想证明代码已经改进的时候。该工具对单个项目免费，并为多个项目提供付费方案。

命令行工具

除了 DevTools 和在线工具之外，还有命令行界面 (CLI) 工具可以帮助审核 CSS。

华莱士

我最喜欢的命令行工具之一是Wallace。安装完成后，输入 `wallace`wallace并加上网站名称。输出结果会显示关于该网站 CSS 代码的所有信息。我最喜欢查看的是 `<style>` 标签的!important使用次数以及代码中 ID 的数量。另一个很有用的信息是最高优先级值以及使用该优先级值的选择器的数量。这些信息可能预示着代码存在“问题”。

我最喜欢这个工具的一点是，它能提取网站的所有 CSS 代码，不仅包括外部文件，还包括内联代码。这就是为什么 CSS Stats 和 Wallace 的报告不匹配的原因。

csscss

csscss CLI 工具会显示哪些规则共享相同的声明。这有助于识别重复代码，并找到减少代码量的机会。不过，我建议谨慎考虑，因为这样做可能得不偿失，尤其是在如今的缓存机制下。值得一提的是，csscss 需要 Ruby 环境。

其他实用工具

其他一些 CSS 工具虽然不用于审核，但仍然很有用。我们也列举一下这些工具：

• 颜色排序器 — 按色调排序 CSS 颜色，然后按饱和度排序。
• CSS 分析器 — 对 CSS 字符串进行分析。
• constyble  — 这是一个基于 CSS Analyzer 的 CSS 复杂度检查工具。
• 立即提取 CSS  — 获取单个网页中的所有 CSS。
• 获取 CSS  — 从页面中抓取所有 CSS。
• uCSS  — 抓取网站以识别未使用的 CSS。

结论

CSS无处不在，我们应该把它视为每个项目中不可或缺的一部分。别人怎么看待你的CSS并不重要，重要的是你自己怎么看待它。如果你的CSS结构清晰、编写良好，你就能减少调试时间，把更多精力投入到新功能的开发中。理想情况下，我们希望教会所有人编写优秀的CSS，但这需要时间。

从今天开始，认真对待你的 CSS 代码吧！

我知道审核 CSS 对每个人来说都不是一件轻松愉快的事。但如果你使用这些工具运行代码，并尝试改进 CSS 代码库中的哪怕一小部分，那么这篇文章就达到了目的。

最近我越来越关注 CSS 代码，也努力让更多开发者以更尊重规范的方式编写 CSS 代码。我甚至在css-auditors.com（域名带连字符真棒！）上启动了一个新项目，专门用于 CSS 审核。

如果你知道其他类似的工具，请在评论区告诉我。