审核CSS的工具

CSS 代码审计并非开发者日常工作的常见任务，但有时却不得不进行。这可能是绩效评估的一部分，用于识别关键 CSS 并减少未使用的选择器；也可能是为了改进可访问性，对代码库中使用的所有颜色进行对比度评估；甚至可能是为了强制执行一致性！

无论出于何种原因，以及何时出现这种情况，我通常都会使用本文中介绍的一些工具。但在介绍工具之前，让我们先了解一下“审计”CSS 的含义。

CSS 审计并非易事

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

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

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

浏览器开发者工具

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

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

网格和 Flex 检查器

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

CSS 概述

检查 CSS 非常基础，所有操作都需要手动完成。让我们来看一些更高级的 DevTools 功能。

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

代码覆盖率面板

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

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

渲染面板

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

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

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

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

性能监控器

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

性能面板

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

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

在线工具

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

特异性可视化工具

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

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

CSS 特异性图表生成器

CSS 特异性图表生成器 是一个类似的工具，用于可视化特异性。它显示了一个略有不同的图表，这可能有助于您了解 CSS 选择器如何按特异性组织。正如工具页面上所说，“峰值不好，整体趋势应该是样式表后面的特异性越来越高。”进一步讨论这一点很有趣，但这超出了本文的范围。但是，Harry Roberts 确实在他的文章“特异性图表”中广泛地写到了这一点，值得一看。

CSS 统计信息

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

您只需输入站点的 URL 并按 Enter 键即可。信息被细分为有意义的部分，从声明计数到颜色、排版、z-index、特异性等等。同样，您可能需要将屏幕截图存储起来以便日后参考。

Project Wallace

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

CLI 工具

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

Wallace

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

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

csscss

csscss CLI 工具显示哪些规则共享相同的声明。这对于识别重复代码和减少编写的代码量很有用。在这样做之前我会三思而后行，尤其是在当今的缓存机制下。值得一提的是，csscss 需要 Ruby。

其他有用的工具

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

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

结论

CSS 遍布我们周围，我们需要将其视为每个项目的一等公民。其他人对您的 CSS 的看法并不重要，但您对它的看法确实很重要。如果您的 CSS 有条理且编写良好，您将花费更少的时间来调试它，而将更多的时间用于开发新功能。在理想情况下，我们会教育每个人编写良好的 CSS，但这需要时间。

让今天成为您开始关注 CSS 代码的一天。

我知道 CSS 审计并非对每个人来说都是一件有趣的事情。但是，如果您将您的代码与任何这些工具一起运行并尝试改进 CSS 代码库的任何一部分，那么这篇文章就完成了它的任务。

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

如果您知道任何其他工具，请在评论中告诉我。

以上是审核CSS的工具的详细内容。更多信息请关注PHP中文网其他相关文章！