title: Tools for Auditing CSS（CSS检查工具） author: Gamehu tags: - css - 检查工具 categories: - 前端 date: 2021-04-26 10:58:00 --- ### 背景 之前关注比较多的还是js以及js扩展语言方面的检测工具，对css方面的检查工具了解较少，个人感觉css的检查确实比较难。刚好这两天看到了一篇css检查工具的[文章](https://css-tricks.com/tools-for-auditing-css/)，刚好蹩脚的翻译一下，做个记录。 就如文中作者所说，当然自身也有体会，css检查一个很大的难点就是：可以[通过许多不同的方式](https://css-tricks.com/hearts-in-html-and-css/)来[实现相同的样式](https://css-tricks.com/hearts-in-html-and-css/)。这已经就让CSS审核起来有些棘手。 通过之前我在团队内分享的stylelint等工具可以避免一些问题，但是其实是不够的。仍然还有一些问题时无法解决的比如：[太多的](https://css-tricks.com/a-quick-css-audit-and-general-notes-about-design-systems/)颜色，排版或z-indexs。 所以作者给我们列举了一些工具，用于检查css。 ### 开始 #### 浏览器内的开发工具 用Chrome DevTools 的 CSS 检查工具举例。 详细的可参考 Umar Hansa 的这篇文章 —[Chrome一大堆发布于 2020 年的「伟大的」 DevTool 功能](https://css-tricks.com/whats-new-in-devtools-2020/)。 如果你喜欢手动检查 CSS 代码，我们可以使用 Inspect 工具以找出应用于特定元素的 CSS 代码。使用 "Inspect arrow"，我们甚至可以看到关于颜色、字体、大小和可访问性的那些额外的细节。 ![img](https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615281211425_devtools-inspect.png?resize=1342%2C918&ssl=1) ##### Grid 和 Flex 的检查器 DevTools 界面中有很多实用的工具，我最喜欢的是 Grid 和 Flex 检查器。要启用它们，请进入设置（DevTools 右上方的一个小齿轮图标），点击 Experiments，然后启用 CSS Grid 和 Flexbox 调试功能。虽然这个工具主要用于调试布局问题，但我有时也会用它来快速判断页面上是否使用了 CSS Grid 或 Flexbox。 ![img](https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615281358961_grid-inspector.png?resize=1342%2C921&ssl=1) ##### CSS Overview 让我们看看一些更高级的 DevTools 功能。CSS Overview 就是其中之一。 要启用 CSS Overview 工具，进入设置，点击 Experiments，启用 CSS Overview 选项。 要打开 CSS Overview 面板，我们可以使用 ⌘ ⇧ P 或 Ctrl ⇧ P 快捷键，输入 css overview，然后选择 Show CSS Overview。这个工具可以展现 CSS 属性的概览，比如颜色、字体、对比度问题、未使用的声明和media查询。我通常用这个工具来判断当前 CSS 代码的好坏。例如，如果有 50 种灰度色彩或过多的排版定义，就意味着样式规范没有被应用到实际，或者甚至可能不存在样式规范。 ![img](https://i2.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615281703939_css-overview.png?resize=1342%2C918&ssl=1) 不过请注意，该工具会对应用于这个页面的样式做出概览，而不是对单个文件做出概览。 ##### Coverage panel Coverage Panel 工具会显示页面上使用的代码数量和百分比。要查看它，我们可以使用 ⌘ ⇧ P 或 Ctrl ⇧ P 快捷键，键入 Coverage，选择 Show Coverage，然后点击刷新图标。 你可以在 URL 过滤器中输入 .css 以用于过滤专门显示 CSS 文件。我通常使用这个工具来了解网站的交付技术。例如，如果我看到 CSS 的覆盖率相当的高，我就可以认为 CSS 文件是为每个页面单独生成的。这可能不是关键数据，但有时它有助于了解缓存策略。 ![img](https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615281772886_coverage.png?resize=1342%2C919&ssl=1) ##### Rendering Panel Rendering Panel 是另一个有用的工具。要打开渲染面板，我们可以使用 ⌘ ⇧ P 或 Ctrl ⇧ P 快捷键。这次输入 "Rendering"，然后选择 "Show Rendering" 选项。这个工具有很多选项，个人觉得最好用的是： - **Paint flashing** — 当重绘事件发生时会显示绿色矩形。我用它来识别需要花费太多渲染时间的区域。 - **Layout Shift Regions** — 当布局移动发生时显示蓝色矩形。为了充分利用这些选项，我通常在 "网络" 选项卡下设置 "Slow 3G" 预设。我有时会录制我的屏幕，然后放慢视频速度来寻找布局转移。 - **Frame Rendering Stats** — 显示 GPU 和帧的实时使用情况。这个工具在识别动画卡顿和滚动问题时很方便。 这些工具会给出常规检查中没有的数据，它对于了解 CSS 代码是否具有性能以及消耗设备的能量的多少提供依据。 其他选项可能对调试问题更有利，比如模拟和禁用各种功能，强制使用 prefers-color-scheme 功能或打印媒体类型，以及禁用本地字体。 ![img](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615282108070_renderiing.png?resize=1342%2C918&ssl=1) ##### Performance Monitor 另一个检查 CSS 代码性能的工具是 Performance Monitor。要启用它，我们可以使用 ⌘ ⇧ P 或 Ctrl ⇧ P 快捷键，输入 Performance Monitor，然后选择 Show Performance Monitor 选项。我通常使用这个工具来查看与页面交互或动画发生时会触发多少次重新计算和布局。 ![img](https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615282038861_performance-monitor.png?resize=1342%2C918&ssl=1) ##### Performance Panel 在 Performance Panel 上，我们可以详细查看页面加载过程中的所有浏览器事件。要启用性能工具，我们可以使用 ⌘ ⇧ P 或 Ctrl ⇧ P 快捷键，输入 Performance，选择 Show Performance，然后点击 "重新加载" 图标。我通常会启用 Screenshots 和 Web Vitals 选项。对我来说，最感兴趣的是First Paint、 First Contentful Paint、Layout Shifts、 Largest Contentful Paint这几个指标。 还有一个饼图显示了绘制和渲染时间。 ![img](https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615282240348_performance.png?resize=1342%2C918&ssl=1) DevTools 可能不算是一个经典的检查工具，但它可以帮助我们了解哪些 CSS 功能被使用，代码的效率，以及代码的执行情况，而这些都是 CSS 代码检查的关键所在。 #### 在线工具 DevTools 只是用于检查css的其中一个工具，下面介绍一下其它可用来检查 CSS 代码的工具： ##### Specificity Visualizer [Specificity Visualizer](https://github.com/isellsoap/specificity-visualizer)显示代码库中 CSS 选择器的特殊性。只需访问网站并粘贴 CSS。 主图 Main Chart 会显示特定样式与样式表中的位置的关系。另外两个图表显示了特定样式的使用情况。我经常使用这个网站来寻找 "bad" 选择器。例如，如果我看到许多特定样式被标记为红色，我很容易得出结论 —— 这里的 CSS 代码可以改进得更好。在你努力改进时，保存截图以供参考是很有帮助的。 ![img](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615280650448_specificity-visualizer-frame.png?resize=1342%2C918&ssl=1) ##### CSS Specificity Graph Generator [CSS Specificity Graph Generator](https://jonassebastianohlsson.com/specificity-graph/)是一个类似的可视化特定样式工具。它显示了一个略有不同的图表，可能会帮助你看到你的 CSS 选择器是如何按特定样式组织的。正如它在工具页面上所说的那样，"波峰是不好的，总的趋势应该是在样式表的后期有更高的特定样式"。进一步讨论这个问题会很有意思，但这不在本文的讨论范围内。然而，Harry Roberts 在他的文章 ["The Specificity Graph"](https://csswizardry.com/2014/10/the-specificity-graph/) 中确实广泛地写到了这一点，值得一试。 ![img](https://i2.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615280474471_css-specificity-graph-generator-frame.png?resize=1342%2C918&ssl=1) ##### CSS Stats [CSS Stats](https://github.com/cssstats/cssstats) 是另一个为你的样式表提供分析和可视化的工具。事实上，Robin 在不久前写过关于它的[文章](https://css-tricks.com/a-quick-css-audit-and-general-notes-about-design-systems/)，并展示了他如何使用它来审核他工作中的样式表。 你需要做的就是输入网站的 URL，然后点击 Enter。这些信息被分割成有意义的部分，包括了样式的声明数、颜色、排版、z-index 和特定样式等等。同样，你可能要把截图存储起来，以备日后参考。 ![img](https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615280657659_cssstats-frame.png?resize=1342%2C918&ssl=1) ##### Project Wallace [Project Wallace](https://www.projectwallace.com/analyze-css) 是由 Bart Veneman 开发的，而他已经在 CSS Tricks 上介绍了这个[项目](https://css-tricks.com/in-search-of-a-stack-that-monitors-the-quality-and-complexity-of-css/)。Project Wallace 的强大之处在于，它可以比较和可视化基于导入的变化。这意味着你可以看到你的 CSS 代码库以前的状态，并看到你的代码在不同状态之间的变化。我觉得这个功能相当有用，特别是当你想说服别人代码是改进过的。该工具对单个项目是免费的，并为更多项目提供付费计划。 ![img](https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615280724437_projectwallace-frame.png?resize=1342%2C918&ssl=1) #### CLI 工具 除了 DevTools 和在线工具，还有命令行界面（CLI）工具可以帮助我们检查 CSS： ##### Wallace 我最喜欢的 CLI 工具之一是[Wallace](https://github.com/bartveneman/wallace-cli)。安装后，输入wallace，然后输入网站名称，它就会自动输出显示了你需要知道的关于网站的 CSS 代码的一切。我最喜欢看的是 !important 的使用次数，以及代码中有多少个 ID。另一个信息是顶级特定样式的数量以及有多少选择器使用它。这些可能是 "坏" 代码的危险信号。 我最喜欢这个工具的地方是，它可以从网站中提取所有的 CSS 代码 —— 不仅是外部文件，还能够包括内联代码。这就是为什么 CSS Stats 和 Wallace 的报告不匹配的原因。 ![img](https://i2.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615280252636_wallace-frame.png?resize=671%2C709&ssl=1) ##### csscss csscss CLI 工具可以显示哪些规则共享相同的声明，而这对于识别重复的代码和减少编写的代码量是很有用的。在这样做之前，我会三思而后行，因为这可能是不值得的，尤其是在今天的缓存机制下。值得一提的是，csscss 需要 Ruby 运行环境。 ![img](https://i2.wp.com/css-tricks.com/wp-content/uploads/2021/03/s_4B1C4D78EB4B7F4A9199BBB917690297400901EB2ABA2FEBF7F40167C51F9C2A_1615280250407_csscss-frame.png?resize=671%2C709&ssl=1) #### 其他有用的工具 - [Color Sorter](https://github.com/bartveneman/color-sorter) — 先按色调，再按饱和度对 CSS 颜色进行排序。 - [CSS Analyzer](https://github.com/projectwallace/css-analyzer) —  对一串 CSS 进行分析。 - [constyble](https://github.com/bartveneman/constyble) — 这是一个基于 CSS Analyzer 的 CSS 复杂性分析器。 - [Extract CSS Now](https://extract-css.now.sh/) — 从一个网页中获取所有 CSS。 - [Get CSS](https://content-project-wallace.vercel.app/get-css) — 从一个网页中获取所有的 CSS。 - [uCSS](https://github.com/oyvindeh/ucss) — 抓取网站以识别未使用的 CSS。 #### 结语 CSS在我们周围无处不在，我们需要将其视为每个项目的头等公民。 如果您的CSS井井有条且编写精良，那么您将花费更少的时间调试它，而将更多的时间用于开发新功能。 在理想的世界中，我们会训练每个人都编写出色的CSS，但这需要时间。 今天是开始关心CSS代码的日子。 我知道审核CSS对每个人都不会很有趣。 但是，如果您针对这些工具中的任何一个运行代码，并尝试甚至改善CSS代码库的一部分，那么这篇文章就完成了它的工作。 最近，我越来越多地考虑CSS代码，并且试图使更多的开发人员更加尊重CSS代码。 我甚至开始了一个新项目[css-auditors.com](http://css-auditors.com/)，该项目专门用于审核CSS。