如何处理未使用的CSS问题

我正在博客上进行一些速度测试，并且总是收到关于未使用CSS的投诉。但这不是我从未使用过的CSS，只是在该特定页面上未使用过。

现在，我以一种结构化的方式工作，但是文件中仍然有一些CSS将不被使用，因为您需要在另一页上使用它。

我不认为在不同页面上使用不同的CSS文件是可行的方法，我认为您最好只创建一个可以缓存的大文件。

现在有一种优雅的方式来解决这个问题，或者您只是坚持下去。

您认为使用一个更大的CSS文件会更好的主张是正确的。压缩后可能只有几个KB，应该缓存，因此不会有太大的开销。虽然有些事情值得检查。

如果某些CSS仅在一页上使用，那么在这种情况下，最好将CSS放在样式标签中。（注意：这可能会使事情难以维护，尤其是当您稍后决定在其他地方使用类似的样式时。）

如果您使用最受欢迎的页面（例如，占页面浏览量50％以上的页面），并且发现这些页面上仅使用了很少量的CSS，则用户将其拆分成更快的速度两个CSS文件。现在，访问您最受欢迎页面的新用户下载量更少。在其他页面上，还有一个额外的HTTP请求，但这并不是什么大问题。

确保CSS进行了优化。尽可能避免使用后代选择器。如果选择器的右侧过于通用，则可能会减慢渲染时间。例如，.class div {}这会有点慢，因为浏览器必须检查<div>页面上的每个元素，然后在最上方查找DOM树以查找（或不查找）具有该类的元素。

我认为这是您正在使用的speedtest工具的一个缺点，它无法查看整个站点，也不会看到根本不使用哪个CSS。如果您找到可以使用的工具，请告诉我们！

我认为您最好只创建一个可以缓存的大文件。

是的，这很有意义，除非有一组页面需要额外的CSS，在这种情况下，您可以将其包含在其中。

有一个方便的小型Firefox插件，称为Dust-Me Selectors，可以检查您的CSS并报告任何未使用的规则。但是，它不适用于最新版本的Firefox（v8.0），这有点可惜。

PS：如果我是你，我会带着一撮盐吃CSS Lint –有一种流派认为它的“建议”是徒劳的，完全是矫over过正。（有关更多详细信息，请参见Matt Wilcox的有说服力的文章，“ CSS Lint有害 ”）。充其量，这完全是非官方的……，让我们面对现实，我们是否真的需要另一种工具/伪标准来满足？

我能想到的最优化和可扩展的方式包括：

1. 为与“全局范围”相关的所有内容（例如网站的设计，全局类，库，插件等）制作一个主CSS文件。

2. 制作一个包含一个每页包含一个唯一CSS文件的文件夹的系统（仅在需要时）。这些文件可能与链接到的页面具有相同的文件名，因此您可以在每个页面上运行服务器端脚本，以在该文件夹中查找CSS文件，如果有，则将其添加到该页面中。

3. 也许，为浏览器特定的内容制作不同的CSS文件，仅当访问者具有相对浏览器时才加载。

这样，您将获得一种可靠且优化的分离CSS的方式。是的，在主文件中仍然有未使用的规则，但是从逻辑的角度来看，它们将是应该存在的地方。

还请记住，这3个CSS文件“层”将像单个CSS文件一样被缓存。