前言
在开发人员的日常生活中，检查CSS并不常见，但有时不得不这样做。也许这是性能评估网页的一部分，为了找出关键的CSS并减少未使用的选择器。也许是为提高访问性，代码库中使用各种颜色对比突出。
无论情况如何，每当那一时刻到来时，我通常都会使用本文中将要介绍的一些工具。但在此之前，让我们首先看看“检查”CSS意味着什么。
检查CSS很困难
一般来说，代码检查涉及分析代码以发现bug或其他不正常的地方，例如可能的性能问题。对于大多数编程语言来说，审核代码的概念相对简单:它是否有效。但是CSS是一种特殊的语言，在这种语言中，错误大多会被浏览器忽略。事实上，你可以通过许多不同的方式实现相同的风格。至少可以说，这使得CSS的检查有点棘手。
通过为您喜欢的代码编辑器使用扩展或设置检查器或代码检查器，可以防止发现这些错误。但这不是我想在这里展示的，这还不够。我们仍然可能会使用太多的颜色、排版定义或z-index，所有这些都可能导致CSS代码库混乱、不可维护、不稳定。
为了真正检查CSS，我们需要更深入地挖掘并找到那些是最佳的做法。为了找到这些做法，我们可以使用以下工具。
浏览器开发工具
让我们看看用于CSS检查的Chrome 开发工具。
如果您喜欢手动检查CSS代码，可以使用Inspect工具。通过使用它，我们可以看到应用到特定元素的CSS代码。使用“检查箭头”，我们甚至可以看到关于颜色、字体、大小和可访问性的更多详细信息。
CSS Overview
检查 CSS 是非常基础的，一切都需要手动完成。让我们看看一些更高级的 DevTools 功能。
CSS Overview就是其中之一。要启用 CSS Overview工具，请转到“设置”，单击“实验”，然后启用“CSS Overview”选项。要打开 CSS Overview面板，您可以使用 CMD+Shift+P 快捷键，输入“CSS Overview”，然后选择“显示 CSS Overview”。这个工具总结了 CSS 属性，如颜色、字体、对比度、未使用的声明和媒体查询。我通常使用这个工具来简单判断CSS代码的好坏。例如，如果有“50 级灰度”或太多的排版定义，这意味着风格指南没有得到遵循。
Coverage panel
覆盖面板
覆盖率工具显示页面上使用的代码量和百分比。要查看它，可以使用 CMD+Shift+P 快捷键，键入“coverage”，选择“Show Coverage”，然后单击“refresh”图标。
也可以通过在 URL 过滤器输入中键入“.css”来仅过滤 CSS 文件。我通常使用这个工具来了解网站使用的技术。例如，如果我看到覆盖率非常高，我可以假设 CSS 文件是为每个页面单独生成的。它可能不是关键数据，但有时它有助于理解网站的缓存策略。
Rendering Panel
渲染面板是另一个有用的工具。要打开渲染面板，再次使用 CMD+Shift+P，这次输入“rendering”，然后选择“Show Rendering”选项。这个工具有很多选项，但我最喜欢的是：
- Paint flashing — 在发生重绘事件时显示绿色矩形。我用它来识别渲染时间过长的区域。
- Layout Shift Regions — 当布局移动发生时 显示蓝色矩形。为了充分利用这些选项，我通常在“网络”选项卡下设置“慢速 3G”预设。我有时会录制我的屏幕，然后放慢视频速度以找到布局变化。
其他选项可能更有助于调试问题，例如模拟和禁用各种功能、强制使用首选颜色方案功能或打印介质类型以及禁用本地字体。
Performance Monitor
性能监视器
另一个用于检查性能 CSS 代码的工具是性能监视器。要启用它，再次使用 CMD+Shift+P，键入“performance monitor”，然后选择“显示性能监视器”选项。我通常使用这个工具来查看在与页面交互时或动画发生时触发了多少重新计算和布局。
Perfomance panel
“性能”面板显示页面加载期间所有浏览器事件的详细视图。要启用性能工具，请执行 CMD+Shift+P，键入“性能”，选择“显示性能”，然后单击“重新加载”图标。我通常启用“屏幕截图”和“Web Vitals”选项。对我来说最有趣的指标是 First Paint、First Contentful Paint、Layout Shifts 和 Largest Contentful Paint。还有一个饼图显示绘画和渲染时间。
总结
CSS无处不在，我们需要把它视为每个项目的一等公民。别人怎么看你的CSS并不重要，重要的是你怎么看它。如果你的CSS井然有序并且编写良好，那么您将花费更少的时间调试它，从而得以花更多的时间开发新功能。在理想的世界中，我们会教育每个人写好的CSS，但这需要时间。
让今天成为你开始关心CSS代码的日子。
我知道不是每个人都喜欢检查CSS。但是，如果在这些工具上运行代码，并试图改进CSS代码库的哪怕一部分，那么本文就完成了它的工作。
如果你知道任何其他工具，请在评论中告诉我。