使用CSS我不是书签

Stoyan说得完全正确。尽管我们都热爱CSS，但它仍然是网站加载速度的重要因素，减少CSS用量是一件好事。他创建了一个名为“CSS Me Not”的便捷书签，用于诊断不必要的CSS文件，我们稍后会详细介绍。

问题在于CSS位于关键路径上，它会阻塞渲染，甚至经常阻塞JavaScript执行。我们热爱CSS，它很神奇，它可以完成令人难以置信的壮举，修复损坏的UI，操纵图像并绘制令人惊叹的图片。我们热爱CSS。我们只是想要……更少的CSS，因为它的本质是阻塞性的。

有时我们的网站会使用完全不必要的整个样式表。我不得不承认，WordPress在这方面臭名昭著，它会加载你可能根本没有使用的插件和区块的样式表。在我写这篇文章的时候，我正处于这种境地。我只是还没找到时间将一些不需要加载的小样式表清除掉。

Stoyan创建了一个名为“CSS Me Not”的快速书签来查看所有这些CSS文件。当然，最大的好处是它让你知道你面临的是什么。

你也可以在DevTools中找到这些样式表，但是“CSS Me Not”书签使它更容易，并且还有一个杀手级的额外功能：关闭这些样式表。在我的CSS-Tricks网站上测试这个书签，我可以看到WordPress加载了四个样式表（由于设置和插件），我知道我并不需要它们。

如果你想在DevTools中执行此操作，你可以按CSS过滤你的网络请求，找到要关闭的样式表，右键单击并阻止它，然后重新加载。

多年来我一直都在努力解决这个问题，在WordPress中取消我不想要的脚本和样式的队列。

删除完全未使用的样式表是一个明显的胜利，但还有一个更棘手的问题，即删除未使用的CSS。在那篇文章中，我提到了真正了解任何特定CSS是否未使用的唯一方法，那就是为每个选择器附加一个背景图像，然后在一段时间的生产时间后检查服务器日志，以查看哪些图像从未被请求过。Stoyan在这里证实了我的说法：

UnCSS有点像“实验室”。“现实世界”可能会让你大吃一惊。因此，我们在SomeCompany Inc.做了一个技巧，就是在构建时为所有CSS声明添加工具，其中每个选择器都获得一个1×1的透明背景图像。然后在一周左右后仔细检查服务器日志，看看实际使用了什么。

以上是使用CSS我不是书签的详细内容。更多信息请关注PHP中文网其他相关文章！