Question

最近我正在阅读很多CSS优化，我注意到几乎每篇文章都建议将所有样式放在一个文件中。

我理解这背后的想法，但这是实用的吗？我的意思是我在一个相当大的项目中工作，现在我有大量的风格。我认为将所有内容保存在一个文件中是非常困难的。

我的问题是：性能提升是否足以证明在一个文件中拥有所有内容的复杂性？

谢谢！

埃德加。

的更新 的

为了澄清，我确信需要优化CSS。实际上，我有一个最小化和压缩CSS文件的流程，我尽我所能，不要重复自己。

我怀疑使用一个大文件和多个文件的做法。

我们举个例子：

我的应用程序有多个模块，例如：联系人，项目，会计，HHRR等。

每个模块都有一个CSS文件，还有一些其他常规CSS文件，如：reset，layout，forms等。

当我使用CONTACTS模块时，我加载了常规文件和contact.CSS文件。我跳过了其余的CSS因为不需要它们。

现在对数学来说，假设每个CSS文件大约是10KB，

我目前的方式：

这总共约有60kb和6个下载请求。

一个文件方法：

因此，在您看来，使用一个大文件和只有一个下载请求的有益收益，证明实施将所有文件组合在一起的方法以及所有麻烦的所有额外工作是正确的吗？

Answer 1

对于开发，请将它们分开。 CSS很快就会成为一场噩梦。对于生产，您应该构建一个流程来将所有文件合并，缩小和压缩为一个。

Answer 2

两者都做。开发多个文件，然后只需要一个流程，在部署时将它们组合，压缩和缩小（删除注释，空格等）到一个文件中。

Answer 3

像这样压缩你的CSS是一个好主意，因为它可以节省字节并使页面加载速度更快。

当您开发您的网站时，当然不要缩小代码。这是毫无意义的，因为您的本地网络服务器尽可能快。但是当您部署您的网站时，请缩小代码。它可以节省带宽并使您的网站对最终用户更具响应性。

以下是我将使用的一小部分CSS：

/*  33 characters */
body {
  background-color: red;
}

压缩后，它会小一点（原始大小的81%）：

/* 27 characters */
body{background-color:red;}

您可以创建一个脚本来压缩CSS，因为您不应该手动执行此操作。谷歌“css minifiers”，我打赌你会发现一吨。

Answer 4

带宽增益并不是真正的性能提升。浏览器必须获取的每个文件代表大约200个额外字节。你可以有一个程序将多个CSS文件合并为一个用于部署，但大多数CSS缩小器都会为你做这个。

Answer 5

我很惊讶没有人提到一个非常明显的理由。

在一个大型网站中，您将需要加载许多元素，尤其是可视元素 - 图像。考虑一下您的网站加载了多少文件。您可以一次从单个域加载数量有限的文件。 CSS正在带来一些背景图片和精灵。加载2个，3个或更多CSS文件是没有意义的。

Blender建议的缩小是对您的带宽的奖励。对于单个用户来说2K更是值得注意，但是乘以1 000或10 000是很多。如果你缩小CSS，那么HTML呢？我没有看到这么多页面用缩小的HTML！