CSS 审计工具

审计 CSS 在开发人员的日常工作中并不常见，但有时您不得不这样做。 也许这是性能审查的一部分，以识别关键 CSS 并减少未使用的选择器。 也许是改进可访问性的努力的一部分，其中代码库中使用的所有颜色都经过对比度评估。 它甚至可能用于强制一致性！

无论什么情况，以及无论何时出现这种情况，我通常都会使用一些我在本文中介绍的工具。 但在此之前，让我们看看首先“审计” CSS 的含义是什么。

审计 CSS 很困难

通常，代码审计涉及分析代码以查找错误或其他不规则性，例如可能的性能问题。 对于大多数编程语言而言，代码审计的概念相对简单：它要么有效，要么无效。 但是 CSS 是一种特殊的语言，其中浏览器会忽略大多数错误。 然后是您可以在 多种不同的方式中实现相同的样式。 这使得 CSS 至少可以说审计起来有点棘手。

使用您最喜欢的代码编辑器的扩展程序或设置 linter 或代码检查器可以防止发现这些错误。 但这不是我在这里要展示的，这也不够。 我们仍然可以使用 过多 的颜色、排版定义或 z 索引，所有这些都可能导致混乱、难以维护、不稳定的 CSS 代码库。

要真正审计 CSS，我们需要更深入地挖掘，并找到不被认为是最佳实践的地方。 为了找到这些地方，我们可以使用以下工具。

浏览器开发者工具

让我们看看 Chrome 开发者工具中的 CSS 审计工具。 我在这里使用 Brave，它是基于 Chromium 的。 您可能还想 查看 Umar Hansa 的这篇文章，他汇总了 2020 年发布的一大堆很棒的开发者工具功能。

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

网格和弹性框检查器

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

CSS 概述

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

CSS 概述 就是其中之一。 要启用 CSS 概述工具，请转到设置，单击“实验”，然后启用 CSS 概述选项。 要打开 CSS 概述面板，您可以使用 CMD+Shift+P 快捷键，键入“css 概述”，然后选择“显示 CSS 概述”。 此工具会总结 CSS 属性，例如颜色、字体、对比度问题、未使用声明和媒体查询。 我通常使用此工具来了解 CSS 代码的好坏程度。 例如，如果存在“50 种灰色”或过多的排版定义，则意味着没有遵循样式指南，或者甚至可能不存在样式指南。

覆盖率面板

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

您可以在 URL 过滤器输入框中键入“.css”来仅筛选 CSS 文件。 我通常使用此工具来了解站点的交付技术。 例如，如果我看到覆盖率很高，我可以假设 CSS 文件是为每个页面单独生成的。 这可能不是关键数据，但有时有助于了解缓存策略。

渲染面板

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

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

这些工具并不是常规审计所隐含的，但我发现它对于了解 CSS 代码的性能以及它是否不会消耗设备的能量至关重要。

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

性能监视器

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

性能面板

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

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

在线工具

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

特异性可视化工具

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

主图表显示了特异性与样式表中位置的关系。另外两个图表显示了特异性的使用情况。我经常使用该网站来查找“不良”选择器。例如，如果我看到许多以红色标记的特异性，我可以轻松地得出结论，代码可以改进。将截图保存起来以供参考，在你努力改进的过程中会很有帮助。

CSS 特异性图表生成器

CSS 特异性图表生成器 是一个类似的工具，用于可视化特异性。它显示了一个稍微不同的图表，可能有助于你了解你的 CSS 选择器是如何按特异性组织的。正如该工具页面上所说，“尖峰很糟糕，总体趋势应该是样式表中后期特异性更高”。进一步讨论这一点会很有趣，但这超出了本文的范围。然而，Harry Roberts 在他的文章 “特异性图表” 中对此进行了广泛的阐述，值得一看。

CSS 统计

CSS 统计 是另一个工具，为你的样式表提供分析和可视化功能。事实上，Robin 之前就写过关于它的文章，并展示了他如何使用它来审计他工作中的样式表。

你所要做的就是输入网站的 URL 并按Enter。信息被细分为有意义的部分，从声明计数到颜色、排版、z-index、特异性等等。同样，你可能需要保存截图以备日后参考。

Wallace 项目

Wallace 项目 是由 Bart Veneman 制作的，他之前曾在 CSS-Tricks 上介绍了这个项目。Wallace 项目的强大之处在于它可以根据导入比较和可视化更改。这意味着你可以看到你 CSS 代码库的先前状态，并查看你的代码在状态之间是如何变化的。我发现这个功能非常有用，尤其是在你想说服某人代码已经改进时。该工具对于单个项目是免费的，并为多个项目提供付费计划。

CLI 工具

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

Wallace

我最喜欢的 CLI 工具之一是 Wallace。安装完成后，输入 wallace，然后输入站点名称。输出显示了你需要了解的关于该站点 CSS 代码的所有信息。我最喜欢查看的是 !important 使用的次数，以及代码中使用了多少 ID。另一个不错的信息是最高特异性数字以及有多少选择器使用了它。这些可能是“不良”代码的警示信号。

我最喜欢这个工具的地方在于，它会提取网站上的所有 CSS 代码，不仅是外部文件，还包括内联代码。这就是为什么 CSS 统计和 Wallace 的报告不匹配的原因。

csscss

The csscss CLI tool shows which rules share the same declarations. This is useful for identifying duplicated code and opportunities to reduce the amount of code that’s written. I would think twice before doing that as it might not be worthwhile, especially with today’s caching mechanisms. It is worth mentioning that csscss requires Ruby.

其他有用的工具

其他 CSS 工具可能不适用于审计，但仍然很有用。我们也列出这些工具。

• 颜色分类器 — 按色调对 CSS 颜色进行排序，然后按饱和度排序。
• CSS 分析器 — 为一段 CSS 生成分析。
• constyble — 这是一个基于 CSS 分析器的 CSS 复杂性 linter。
• 立即提取 CSS — 从单个网页中获取所有 CSS。
• 获取 CSS — 从页面中抓取所有 CSS。
• uCSS — 爬取网站以识别未使用的 CSS。

结论

CSS 无处不在，我们需要将其视为每个项目的头等公民。其他人对你的 CSS 的看法无关紧要，但你对它的看法确实很重要。如果你的 CSS 有条理且编写良好，你将花更少的时间调试它，而有更多的时间开发新功能。在理想情况下，我们会教育每个人编写好的 CSS，但这需要时间。

让今天成为你开始关心你的 CSS 代码的一天。

我知道，审计 CSS 并不是每个人都喜欢做的事情。但如果你将你的代码运行到这些工具中，并尝试改进你的 CSS 代码库中的一部分，那么这篇文章就达到了目的。

最近我对 CSS 代码越来越重视，我正努力让更多开发者更尊重地编写 CSS 代码。我甚至在 css-auditors.com（为带连字符的域名欢呼！）上启动了一个新项目，致力于审计 CSS。

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