优化CSS - 如何正确减少CSS占用空间

Question

我的印象是，将CSS文件捆绑到一个文件中以减少HTTP请求的数量是理想的。但是，通过执行此操作，最终的CSS文件将包含未在该页面上使用的CSS规则。

考虑到这一点，大型网站的最佳做法是什么：

1. 将所有CSS捆绑到一个主文件中，以便浏览器可以访问其他页面上的缓存文件。
2. 将CSS拆分为多个文件，只加载该页面所需的文件，以减少加载未使用的CSS的情况（这也允许缓存常用文件）。
3. 使用程序将用于该特定页面的CSS捆绑到一个文件中，这样只加载一个CSS文件，只加载该页面所需的CSS。

我认为＃3是最好的选择，但是不需要浏览器每次更改时重新下载捆绑的CSS文件（从包中添加/删除CSS文件）？

任何意见都赞赏。

Answer 1

你会认为3号是最好的选择，但大部分时间都不是。

浏览器将缓存css文件，并且不需要为后续请求下载它，这就是为什么我倾向于将我的所有css捆绑到网站并缩小它。你在第一个请求上受到了一些打击，但之后浏览器只是从缓存中取回文件。

如果将css拆分为不同的文件，浏览器将需要在每个页面的第一个请求上发出css请求（之后它将被缓存）。

此外，从可维护性的角度来看，我宁愿将我的CSS放在一个文件中。

Answer 2

我会捆绑到1个文件中。保留多个文件只是一件令人头疼的事。

我还会研究优化CSS的方法，尝试设置一个处理所有按钮样式的类，然后继续使用。

你的CSS文件不应该太大，甚至不用担心文件大小，如果你小心如何构建它。

Answer 3

最好的方法是将CSS文件缩小为一个并将它们放在可靠的内容分发网络上。

正确的优化是尽可能地减少传输，同时保证其稳定性 - 而CSS是加载的关键因素。

如果需要进行小的CSS更新，我建议将这些更新放入内联样式，将放在那些稳定时将它们捆绑到主CSS文件中。