您如何从网站上删除未使用的CSS？

这是我希望您预先知道的：这是一个难题。如果您降落在这里，因为您希望指向一个可以运行的工具，可以告诉您可以从项目中删除哪些CSS，那么……那里有工具，但是我警告您对它们非常小心，因为没有一个可以告诉您完整的故事。

我知道你想要什么。您想运行该工具，删除它告诉您的内容，并且在2.2分钟内拥有更快的网站。对不起，但是我会让你失望的。

我认为，对于任何这样的工具，您都应该对健康的怀疑。他们都没有完全对您撒谎- 他们通常没有足够的信息来为您提供安全可行的结果。这并不是说您不能使用它们，也不能完成。让我们散步。

动机

我认为愿意删除未使用的CSS的＃1驱动程序是：

您使用了CSS框架（例如Bootstrap），其中包括该框架的整个CSS文件，并且仅使用了少数图案。

我可以同情。 CSS框架通常不会提供简单的方法来选择仅使用您使用的内容，并且自定义来源以这种方式可能需要您团队没有的专业知识。这甚至可能是您开始使用框架的原因。

假设您正在加载100 kb的CSS。我会说很多。 （正如我所写的那样，这个网站的页面约为23 kb，并且有很多页面和模板。我没有做任何特别的事情来降低尺寸。）您有怀疑或一些证据，表明您不使用这些字节的一部分。我可以看到引起警报的原因。如果您有100 kb的JPG，可以通过将其滴入某种工具来将其压缩到20 kb，那真是太棒了，非常值得。但是，对于CSS，这样做的收益更为重要，因为CSS已加载到头部并构成阻塞。 JPG不是。

？看“覆盖”

Chrome的DevTools具有“覆盖范围”选项卡，它将告诉您使用了多少CSS和JavaScript。例如，如果我立即访问CSS-Tricks的主页……

它告诉我，我的style.css文件的70.7％未使用。我认为这是对的，其余的CSS也用于其他地方。我不只是将一个大型库将其转移到这个网站上。我手工写了每一行，所以我怀疑其中超过2/3在全球范围内没有使用。

我以为我可以开始“录制”，然后单击网站的不同区域，并观察未使用的数字下降，因为渲染具有不同HTML的不同页面，但是las，当页面刷新时，覆盖范围选项卡也是如此。除非您猜有一个单一页应用程序，否则在多页上查看CSS覆盖范围并不是很有用吗？

我讨厌这么说，但我发现看代码覆盖范围非常毫无用处。对我来说，它描绘了网站上所有这些未使用的代码的可怕图片，这是我的疑问，但我所能做的就是担心。

这可能是您的想法，即首先需要发现和删除未使用的CSS。

我的主要关心

我最大的担心是您查看诸如代码覆盖范围之类的东西，并查看未使用的行：

然后你去，完美！我将删除该CSS！而且您这样做是为了发现它根本没有使用，并且在整个网站上引起了大型样式问题。这是事实：您实际上不知道CSS选择器是否未使用，除非您：

1. 检查整个网站的每个页面上的覆盖范围…
2. 执行所有JavaScript…
3. 在国家的每一个可能的组合下……
4. 在您使用的媒体查询的每种可能组合中。

检查主页不算在内。检查所有顶级页面都不计算。您必须浏览每个页面，包括并非总是最佼佼者的状态，更不用说所有边缘场景了。否则，您可能最终会删除弹出式模式中信用卡选择下拉式下拉样式，该弹出式模式下显示了在宽限期内登录的残疾帐户的用户，该帐户也有一个可以应用的礼品卡。

对于自动化工具来说，这太复杂了，无法确保其方法完美地工作，尤其是在浏览器上下文（不同的屏幕尺寸，不同的功能，不同的浏览器）和第三方的未知数中。

这是我关注的一个例子：

Purifycss Online采用一些URL，并立即提供可使用的CSS副本

这是我将我的CSS-Tricks.com放到在线净化并获得新的CSS。

哦！

它使我有机会放入其他URL（很好），但是CSS-tricks上有成千上万的URL。他们中的许多人相当相似，但是所有人都有使用选择器的潜力。我得到的印象没有执行JavaScript，因为通过JavaScript进入页面上的任何内容都没有风格。它甚至删除了我的：悬停的国家。

也许您会明白为什么我对这些工具的信任如此之低。

构建过程的一部分

PurifyCSS可能更常用地用作构建过程工具，而不是在线界面。他们的文档有有关Grunt，Gulp和Webpack的说明。例如，射击文件以检查和处理它们：

 var content = ['**/src/js/*。js'，'**/src/html/*。html'];
var css = ['**/src/css/*。css'];

var选项= {
  //将将纯化的CSS写入此文件。
  输出：'./dist/purified.css'
};

纯化（内容，CSS，选项）；

这为您提供了更多的准确机会。该内容BLOB可能是构建您网站的每个模板，部分和JavaScript文件的列表。这可能会很痛苦，但是您肯定会变得更准确。它没有说明数据存储中的内容（例如，居住在数据库中的博客文章）和第三方JavaScript，但也许这对您来说并不重要，或者您可以以其他方式考虑它。

Purgecss是Purifycss的竞争对手，警告其比较技术：

PurifyCSS可以与任何文件类型一起使用，而不仅仅是HTML或JavaScript。 PurifyCSS可以通过查看文件中的所有单词并将其与CSS中的选择器进行比较。每个单词都被视为选择器，这意味着可以错误地考虑许多选择器。例如，您可能碰巧在段落中有一个与CSS中选择器相匹配的单词。

因此，请记住这一点。它可以比较潜在的选择器匹配的方式愚蠢，这既聪明又危险。

UNUSEDCSS是一项在线服务，可为您爬网

手动配置工具以从各个角度查看网站上的每个页面无疑是一件琐事，并且随着代码库的发展，需要将其保持在日常的同步中。有趣的是，在线服务未使用CSSS试图通过基于单个URL爬行网站本身来克服这一负担。

我注册了付费服务，并将其指向CSS-Tricks。我承认，一眼就瞥见结果，对我来说感觉要准确得多：

它还使您可以下载清洁的文件并提供大量的自定义，例如检查/取消选中的选择器实际上/不想要（例如，您看到了一个不需要的类名称，但您确定您确实需要它），以及在删除和删除重复的选择器。

我喜欢在线爬网服务的越来越高的准确性，但是有很多噪音，而且我也看不到我如何将其纳入日常的构建和发行过程中。

工具通常用于后处理

假设您的CSS是用较少或SASS构建的，然后使用后处理器将其编译为CSS。您可能会在其他CSS预处理的结尾结合自动未使用的CSS清洁。喜欢…

1. Sass
2. PostCSS / AUTOPREFIXER
3. [干净未使用的CSS]
4. 生产CSS

这两者都是有道理的，对我来说有点有趣。您实际上并未修复生成未使用的CSS的样式。相反，您只需在构建末端擦拭即可。我想JavaScript一直在用树木摇晃做这种事情，因此有一个先例，但对我来说仍然很奇怪，因为CSS代码库是如此直接动手。这种设置几乎鼓励您将CSS丢弃到任何地方，因为过度的罚款没有罚款。它消除了了解如何应用和使用CSS的任何动力。

Purgecss是另一种采用明确输入并为您提供结果的工具

Purgecss是未使用的CSS市场中的另一个玩家。我喜欢的一件切线是，它清楚地解释了它与其他工具的不同。例如，与purifycss相比：

Purifycss最大的缺陷是它缺乏模块化。但是，这也是其最大的好处。 PurifyCSS可以与任何文件类型一起使用，而不仅仅是HTML或JavaScript。 PurifyCSS可以通过查看文件中的所有单词并将其与CSS中的选择器进行比较。每个单词都被视为选择器，这意味着可以错误地考虑许多选择器。例如，您可能碰巧在段落中有一个与CSS中选择器相匹配的单词。

Purgecss通过提供创建提取器的可能性来解决此问题。提取器是获取文件内容并提取其中使用的CSS选择器列表的函数。它允许完美删除未使用的CSS。

目前，Purgecss似乎是大狗。许多人正在使用它并写它。

• Nghia Pham写了有关如何专门使用Bootstrap的文章
• 格雷格·科恩（Greg Kohn）发表了一篇警告，称它不会在白名单中删除异常情况下的选择者。
• Flavio Copes写了有关使用NPM脚本和PostCSS运行它的文章。
• Sarah Dayan仔细详细介绍了如何与尾风一起工作。

尽管Purgecss需要特殊的配置才能与Tailwind一起使用，但似乎有两只豌豆在豆荚中。实际上，他们的文档建议将它们一起使用，并为在构建过程中使用它提供了CLI。

我相信要点是这样的：tailwind产生了充满实用程序选择器的大型CSS文件。但是他们不打算让您使用整个事情。您可以在HTML中使用这些实用程序选择器来执行所有样式，然后使用Purgecss查看所有HTML，然后摇动生产CSS中未使用的实用程序选择器。

尽管如此，在您的网站上的每个模板（JavaScript，HTML或其他方式）上教授它将是一个持续的维护问题，同时手动配置任何依赖第三方资源的内容，并且知道可能在构建过程中无法查看来自数据存储的任何数据，从而使其可以手动考虑。

我最喜欢的技术：让一个真正熟悉您的CSS代码库的人注意问题并旨在随着时间的推移解决

也许这感觉就像是一个老朋友的方法，他需要与时代在一起，但是，这感觉就像我最实用的方法。由于这个问题非常困难，我认为努力工作是答案。这是一段时间以来了解问题并努力解决解决方案。与您的前端密切相关的前端开发人员将对CSS-Land的使用情况有所了解，并且可以将其降低。

我看到的一种极端的测试方法是使用A（IE背景图像：URL（/IS-this-being-used.gif？selector）;）在CSS块中，然后随着时间的推移检查服务器日志以查看是否已访问了该图像。如果访问它，则使用；如果没有，那不是。

但是也许我在潜在工具箱中最喜欢的工具是：

视觉回归测试

您可以尽可能多的网站屏幕截图 - 与所有最重要的页面以及操纵到不同状态的所有页面一样 - 以及在不同的浏览器和屏幕尺寸上。这些屏幕截图是从Git上的主分支创建的。

然后，在将任何分支合并到主人中之前，您可以将所有这些屏幕截图都进行，并将其比较到主机中的屏幕截图。不是手动，而是通过编程方式。

这正是珀西所做的，所以请注意：

多年来，视觉回归测试工具上还有其他刺伤，但珀西是我唯一看到的对我来说很有意义的一种。我不仅需要屏幕截图；我希望它们比较，以便我可以看到它们之间的视觉差异。我不仅想看到差异；我想批准或不赞成他们。我还希望该批准可以阻止或允许合并，并且我希望能够在拍摄屏幕截图之前控制浏览器。我不想手动更新比较图像。这就是珀西的所有面包。

全面披露：珀西之前曾在此处赞助CSS-Tricks上的事情（包括上面的视频），但没有这篇文章。

与原子CSS和CSS-IN-JS的关系

我敢肯定，有很多人阅读本文：我没有未使用的CSS，因为我使用的工具会生成所需的确切CSS，仅此而已。

嘿，有点酷。

也许那是雾化器。也许这是您也经过UNCS的Tachyons，您对此非常谨慎。也许现在是par purgecss组合，现在风靡一时。

也许您以其他方式处理样式。如果您紧密耦合JavaScript组件和样式，例如React和Encotion，甚至仅将CSS模块与Whine一起使用，那么较少未使用的CSS就是CSS-IN-JS的优势。而且，由于在许多基于JavaScript的构建过程中，摇晃树木和代码拆分出现在乘车之旅，因此您不仅具有更少的CSS，而且只加载了目前所需的内容。不过，这一切都有权衡。

您如何避免未来的项目中未使用的CSS？

我认为造型的未来是全球和组件样式之间有意分开的。大多数样式都范围为组件，但是有一些全球样式选择可以清楚地利用级联的优势（例如全球排版默认值）。

如果将大多数样式范围放在组件上，我认为未使用的样式的建立机会较小，因为将您的头脑缠绕在一小块HTML和一小部分CSS周围，而彼此之间直接相关的CSS会更容易。当组件死亡或进化时，样式会随之而来。 CSS捆绑包由实际使用的组件制成。

CSS-IN-JS解决方案自然会朝这个方向前进，因为样式与组成部分绑定在一起。确实，这是重点。但这不是必需的。我喜欢CSS模块的通用方法，这几乎完全用于样式范围，并且不要求您使用某些特定的JavaScript框架。

如果所有这些似乎是理论上的或透视外的，并且您只需一个引导网站，您就可以在其中尝试减少所有引导CSS的大小，我建议您首先使用来自源的bootstrap而不是最终的默认分布式捆绑包。来源是SCSS，并从一堆高级构建中构建，因此，如果您不需要引导程序的特定部分，则可以将其删除。

好运，帮派。

以上是您如何从网站上删除未使用的CSS？的详细内容。更多信息请关注PHP中文网其他相关文章！