用于审计CSS的工具

使用Algolia托管API将疼痛从建筑站点搜索中进行。现在免费开始！

审计CSS不是开发人员日常生活中的共同任务，但有时候您只需要这样做。也许是绩效审查的一部分，以识别关键CSS并减少未使用的选择器。也许是改善码条用于对比度的所有颜色的努力的一部分。它甚至可能会强制执行一致性！

无论如何，无论何时到达那一刻，我通常都可以覆盖一些工具，我将在文章中涵盖。但之前，让我们看看它甚至意味着在第一个地方“审计”CSS。

通常，代码审核涉及分析代码以找到错误或其他不规则性，如可能的性能问题。对于大多数编程语言，审计代码的概念相对简单：它有效，也没有。但CSS是一种特定语言，浏览器主要忽略错误。然后你可以以多种不同的方式实现相同的风格。这使得CSS对审计有点棘手，至少可以说。

通过使用您喜欢的代码编辑器的扩展或设置LINTER或CODE CHECKER，可以防止发现这些错误。但这不是我想在这里展示的，这还不够。我们仍然可以使用太多的颜色，印刷定义或Z-indexes，所有这些都可能导致凌乱，不明如此，不稳定的CSS代码库。

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

让我们来看看CSS审计的Chrome DevTools工具。我在这里使用勇敢，这是基于铬的。您可能还想通过Umar Hansa签出本文，他在2020年汇编了一系列伟大的DevTool功能。

如果您愿意手动检查CSS代码，则存在ICSPTER工具。使用此，我们可以看到应用于特定元素的CSS代码。使用“检查箭头”我们甚至可以看到有关颜色，字体，大小和可访问性的其他详细信息。

DevTools接口中有很多实用的细节，但我最喜欢的是网格和Flex检查员。要启用它们，请转到设置（DevTools右上角的小型齿轮图标），单击实验，然后启用CSS网格和FlexBox调试功能。虽然此工具主要用于调试布局问题，但我有时会使用它来快速确定CSS网格或FlexBox是否甚至在页面上使用。

检查CSS是非常基本的，一切都需要手动完成。让我们来看看一些更高级的devtools功能。

CSS概述是其中之一。要启用CSS概述工具，请转到设置，单击实验，然后启用CSS概述选项。要打开CSS概述面板，可以使用CMD + Shift + P快捷方式，键入“CSS概述”，然后选择“显示CSS概述”。此工具总结了CSS属性，如颜色，字体，对比问题，未使用的声明和媒体查询。我经常使用此工具来获得CSS代码的好或糟糕的“感觉”。例如，如果有“50阴影的灰色”或太多的排版定义，这意味着样式指南未被遵守，或者可能甚至不存在。

覆盖工具显示页面上使用的代码的数量和百分比。要查看它，请使用cmd + shift + p快捷方式，键入“coverage”，选择显示覆盖范围，然后单击“刷新”图标。

您只能通过在URL过滤器输入中键入“.css”来过滤CSS文件。我通常使用此工具来了解网站的传递技术。例如，如果我看到覆盖范围非常高，我可以假设CSS文件是分别为每个页面生成的。它可能不是关键数据，但有时它有助于了解缓存策略。

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

油漆闪烁 - 在重新粉刷事件发生时显示绿色矩形。我用它来识别花费太多时间的区域。

布局换档区域 - 显示布局偏移时的蓝色矩形。要充分利用这些选项，我通常在“网络”选项卡下设置“慢速3G”预设。我有时会录制我的屏幕，然后减慢视频以找到布局班次。

帧渲染统计 - 显示GPU和帧的实时使用。在识别重型动画和滚动问题时，此工具很方便。

这些工具是定期审计并不意味的东西，但我发现了解CSS代码是否表现，并且不会排出设备的能量是必要的。

其他选项可能更有益于调试问题，如仿真和禁用各种功能，强制更喜欢的颜色方案功能或打印介质类型，并禁用本地字体。

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

p erformance面板显示页面加载期间所有浏览器事件的详细视图。要启用性能工具，请执行CMD + Shift + P，键入“性能”，选择显示性能，然后单击“重新加载”图标。我通常能够启用“屏幕截图”和“Web Vitals”选项。对我最有趣的指标是第一个油漆，第一个满足的涂料，布局换档和最大的满足油漆。还有一个饼图，显示绘画和渲染时间。

DevTools可能不被视为古典审计工具，但它有助于我们了解使用哪些CSS功能，代码的效率以及它的表现 - 所有这些都是审计的关键事情。

devtools只是一个装满了很多功能的工具。但是我们可以使用其他可用工具来审核CSS。

特异性可视化器显示CODBASE中CSS选择器的特异性。只需访问网站并粘贴CSS。

主图表显示与样式表中的位置相关的特异性。另外两个图表显示了特殊性的使用情况。我经常使用这个网站找到“坏”选择器。例如，如果我看到许多标记为红色的特异性，我很容易得出结论，代码可能会更好。保存屏幕截图是有助于参考作为改进事物。

CSS特异性图形生成器是用于可视化特异性的类似工具。它显示了一个略微不同的图表，可能有助于您了解CSS选择器是如何通过特异性组织的。正如在工具页面上所说，“尖峰很糟糕，总趋势应该朝着赛车表后面的特异性更高。”讨论进一步是有趣的，但它是缺乏本文的范围。然而，Harry Roberts确实在他的文章中广泛写了它“特殊图”，这是值得的。

CSS统计数据是另一种工具，为您的样式表提供分析和可视化。事实上，罗宾在后面写了一下，并展示了他如何用它来审计他的工作。

您需要做的就是输入网站的URL并按Enter键。该信息被分段为有意义的部分，从声明计数到颜色，排版，Z-索引，特异性等等。同样，您可能希望存储屏幕截图以供以后引用。

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

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

我最喜欢的CLI工具之一是华莱士。安装后，键入wallace，然后键入网站名称。输出显示您需要了解网站的CSS代码所需的一切。我最喜欢看的东西是次数！重要的是使用的，以及代码中的id。另一个整洁的信息是顶级特异性编号以及有多少选择器使用它。这些可能是“坏”代码的红旗。

我最喜欢这个工具的是它是它从站点中提取所有CSS代码，不仅是外部文件，而且也是在线代码。这就是为什么CSS统计数据和华莱士不匹配的报告。

CSSCSS CLI工具显示哪些规则共享相同的声明。这对于识别重复的代码和机会来减少写入的代码量非常有用。在这样做之前，我会三思而后行，特别是对于今天的缓存机制而言。值得一提的是CSSCS需要Ruby。

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

CSS在我们周围的各地，我们需要考虑每个项目的一流公民。别人对你的CSS有什么看法并不重要，但你对它的看法真的很重要。如果您的CSS被组织且写得良好，您将花费更少的时间调试它，并更多地开发新功能。在一个理想的世界中，我们会教育每个人都编写好CSS，但这需要时间。

我知道审计CSS对每个人都不会很有趣。 但是如果您对任何这些工具运行代码并尝试改进CSS CodeBase的一个部分，那么这篇文章已完成其工作。 我最近越来越多地考虑CSS代码，我试图让更多的开发人员更加恭敬地编写CSS代码。 我甚至在CSS-auditors.com开始了一个新项目（Yay用于连字域名！），专门用于审计CSS。