今天，我们发布了有关未使用CSS代码的第二部分材料翻译。
→
第一部分CSS后处理
假设在某些项目中CSS是使用Less或Sass编写的，然后使用后处理器将现有代码编译为常规CSS。 在这样的项目中，可能有一个自动系统可以清除未使用的CSS，该系统在CSS预处理之后启动。 可能看起来像这样：
- ass子
- PostCSS /自动前缀系统。
- 删除未使用的CSS。
- CSS代码已准备好投入生产。
一方面，这是有道理的，另一方面，在我看来，这看起来有些奇怪。 关键是，使用这种方法时，包含样式化命令的源代码不会得到纠正，在此基础上将创建生成的CSS代码，其中还包括未使用的CSS。 取而代之的是，在构建过程结束时，只需删除不必要的CSS。 我怀疑在JavaScript中，当实施树形摇算法时，已经做了一段时间了。 也就是说，使用CSS进行这种处理根本不是新闻。 但是对我来说，这一切似乎都是错误的，因为CSS代码库可以说是位于Web项目的表面。 这种方法几乎促使开发人员不小心编写CSS，以将所有内容都放入CSS源代码中。 事实是，系统将自动清除不必要的CSS。 但是，这完全剥夺了开发人员的愿望，即他们不希望准确了解其设计的样式，以及如何准确地使用CSS。
净化
PurgeCSS是另一个旨在与未使用的CSS对抗的项目。 尽管这与该项目的功能没有直接关系，但我喜欢它，因为它的文档清楚地说明了它与竞争对手的
不同之处。 上面，我们已经给出了PurgeCSS和PurifyCSS之间比较的一部分。 这是专用于PurifyCSS的PurgeCSS文档的另一个摘录。 关键是PurifyCSS的主要问题是该项目的模块化程度低。 但是，这是PurifyCSS的主要优势。 如前所述，PurifyCSS认为CSS单词是它在文件中找到的所有单词。 这种方法充满了错误。 但是PurifyCSS通过创建提取器功能解决了这个问题。 这样的函数获取文件的内容，并从中提取文件中使用的CSS选择器的列表。 这使您可以很好地解决摆脱未使用的CSS代码的问题。
现在，PurgeCSS项目看起来像是CSS代码清理市场的主要参与者。 许多人使用它，许多人写它。
- 这是有关如何使用PurgeCSS的材料，尤其是在使用Bootstrap时。
- 从本文中，您可以了解到，在特殊情况下，PurgeCSS不会使用白名单删除选择器。
- 在这里，您可以了解如何将PurgeCSS与npm脚本和PostCSS结合使用。
- 它讨论了PurgeCSS如何与Tailwind一起工作。
尽管PurgeCSS需要进行特殊的调整才能与Tailwind一起使用，但这两个工具似乎完美地结合在一起。 实际上，即使在Tailwind
文档中，您也可以找到共享它们的建议。 而且PurgeCSS有
一个命令行工具 ，可以在构建项目的过程中应用它。
我认为其实质可以归结为以下几点：Tailwind创建了一个大型CSS文件，其中包含辅助选择器。 但是不假定所有这些选择器都将在项目中使用。 开发人员使用它们来解决样式化HTML代码的所有任务，然后PurgeCSS分析此HTML代码并删除不必要的选择器，从而为生产准备CSS。
的确，仍然需要告知PurgeCSS网站上使用的每个HTML和JavaScript文件。 换句话说，您需要独立地配置与外部资源相关的所有内容，并考虑到以下事实：在项目的组装过程中，可能无法分析从某些存储设备进入项目的数据。 结果，在项目组装中使用PurgeCSS涉及大量的手工工作。
我最喜欢的摆脱未使用CSS的方法
我最喜欢的是以下删除不必要CSS的方法。 这意味着项目开发团队中会有人非常熟悉该项目的CSS代码。 这个人应该了解当前的样式问题，并应逐步解决。 也许这是一个应该跟上时代发展的人的过时看法。 但是对我而言，无论如何，这似乎是最实用的方法。 考虑到我们正在考虑的任务很难解决，我认为解决此任务给开发人员带来的挑战的答案可能是艰苦的工作。 答案是对问题及其逐步解决的理解。 熟悉该项目并知道其中使用了什么而不使用什么的前端开发人员可以解决此问题。
我看到了一种极端的方法来确定是否使用了站点选择器。 CSS块使用了诸如
background-image: url(/is-this-being-used.gif?selector);的设计
background-image: url(/is-this-being-used.gif?selector); 。 应用后，将定期检查服务器日志，以查明是否已请求接收相应的图像。 如果有这样的请求，则使用正在调查的CSS块。 如果不是，则不使用它。
但是，也许我在未使用的CSS资源管理器工具包中最喜欢的工具就是下一部分将要讨论的工具。
通过视觉回归研究项目
这种方法的事实在于，开发人员会尽可能多地捕获网站的屏幕截图。 它们复制最重要页面的屏幕副本，以及这些页面的外观取决于应用程序的状态。 屏幕截图是在不同的浏览器中以不同的屏幕尺寸拍摄的。 这些屏幕截图是基于项目存储库
master分支中的材料创建的。
然后，在将任何其他分支与
master分支合并之前，将基于新分支的材料创建新的屏幕截图，并将其与为
master分支制作的截图进行比较。 当然，这不是手动完成，而是以编程方式完成。
严格来说，
这是一个显示视频的视频。
应该注意的是，关于研究视觉回归的工具的话题已经讲了很多，但是该视频的
作者是唯一能非常清楚地解释所有内容的人。 您不仅需要获取屏幕截图，还需要获取屏幕快照。 您需要比较它们并寻找它们之间的差异。 人们不仅要发现差异，还必须找到差异。 您需要接受或拒绝它们。 此外，有必要通过变更或批准变更来影响存储库中合并分支的过程。 此外，开发人员应该能够在进行屏幕复制之前配置浏览器，并能够使用所截取的屏幕截图来使工作自动化。
原子CSS和CSS-in-JS
我确信该材料的许多读者会说：“我没有未使用过的CSS，因为我使用的工具完全生成了我需要的代码，仅此而已。”
如果是这样，那就太好了。
也许我们在谈论
雾化器 。 也许这是一个
Tachyons工具，其结果通过
UnCSS传递并且非常小心。 也许-这是
Tailwind +
PurgeCSS的组合，现已
广为人知 。
也许-他们仍然以某种方式使用样式。 如果有人紧密地链接JavaScript组件和样式，例如在使用React和Emotion时，甚至只是将CSS模块应用于任何内容，那么这种CSS-in-JS-方法的优点就是减少了未使用CSS的数量在完成的项目中。 另外，由于许多基于JavaScript的项目都使用树状摇动算法和代码拆分技术，因此此类项目不仅将具有更少的不必要CSS。 在他们的工作过程中，只会加载每种特定情况下所需的内容。 但是，当然，这种使用CSS的方法
存在弊端 。
总结
现在让我们考虑如何避免在未来的项目中出现不必要的CSS代码。 我认为样式的未来是全局样式与应用于单个组件的样式之间的分离。 大多数样式都限于组件的范围，但是可以使用全局样式来利用CSS的级联性质。 例如，它可能类似于全局标准印刷设置。
如果大多数样式都受组件范围的限制，那么我认为不必要的样式不太可能渗透到现成的项目中，因为开发人员可以轻松地研究紧密相关的小型HTML和CSS片段之间的关系。 当从项目中删除或开发组件时，样式化将离开项目或与其一起进行开发。 结果，将基于项目中实际使用的组件创建CSS程序集。
CSS-in-JS技术很自然地朝着这个方向发展。 应用此类技术时，样式与组件相关。 在这种情况下，这是最重要的事情。 但是将样式绑定到组件是可选的。 我喜欢通用方法，它涉及
CSS模块的使用。 它几乎完全旨在分离样式的范围，并且不强制开发人员使用任何特定的JavaScript框架。
在您看来，以上所有内容似乎都在理论上或与Web开发人员的实际需求相去甚远。 您只有一个使用Bootstrap的网站，并且希望减少该网站用户加载的CSS大小。 如果是这样，我建议您使用Bootstrap源代码而不是其标准构建。 此源代码使用SCSS编写，由许多插件组成。 这意味着，如果您不需要Bootstrap的某些部分，则只需禁用相应的模块即可。
在构建项目之前，从Bootstrap中删除下拉菜单，徽章和面包屑模块我希望大家在与不必要的CSS代码进行艰苦的斗争中取得好运。
亲爱的读者们！ 您如何处理投入生产的未使用CSS代码？
