一个CSS文件与多个不同页面的文件

Question

我有一个网站，其中所有网页都有相同的页眉和页脚，但内容之间有所不同。我估计有30％的CSS对所有页面都是通用的，70％是不同的。

对于不同的页面，使用一个CSS文件与多个文件的相对优势和劣势是什么？

Answer 1

一个CSS文件的优点

• 只需要一个HTTP请求即可获取它，这可以改善大多数用户的首页加载时间，并加快后续页面加载速度，尤其是在用户访问期间访问多个不同页面类型时。这也可以减少服务器负载。

多个CSS文件的优点

• 减少带宽，特别是如果任何给定用户在访问期间不太可能查看您网站上的许多不同页面类型（如果您的网站被划分为几乎完全不相关的子网站，则可能就是这种情况）。请注意，多个CSS文件将增加HTTP请求，尽管节省带宽实际上可能会降低现代连接的加载速度。

在大多数情况下，我一般都赞成为网站提供一个CSS文件。

Answer 2

多个CSS文件需要多个请求才能从服务器检索文件 - 这可能会在客户端呈现页面之前引入额外的延迟。单个CSS文件可以减少延迟，并且可以让您的网站更快地呈现。

单个CSS文件的好处随着客户端延迟速度的增加而增加 - 因此高延迟调制解调器和手机可能比宽带连接的计算机受益更多。

Answer 3

我同意其他答案，一个文件通常更好，我会根据我的经验补充一下，经过缩小和gzip（你这两个都做对了，对吗？）我曾经服过的CSS没有超过少量的千字节。根据源代码行数，CSS文件可以在物理上很长，但是当你把它们压缩它们时它们非常紧凑（并且你可能没有那么多文本）。

这是通过在可以的页面上完成CSS来优化CSS的事情之一，但是有很多更大的事情你可以花时间来优化，这很难证明这些努力的合理性那里。

Answer 4

添加到接受的答案：

多个CSS文件的优点

更好的代码组织 - 更容易浏览它们并知道更改不会影响您正在处理的页面以外的页面。