我需要你对CSS优化的意见

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

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

我的问题是：性能提升如此之大，足以证明将所有内容都放在一个文件中的复杂性吗

谢谢

埃德加

更新

为了澄清，我确信需要优化CSS。事实上，我有一个最小化和压缩CSS文件的过程，我尽我所能避免重复

我对使用一个大文件与多个文件的做法表示怀疑

让我们举个例子：

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

每个模块有一个CSS文件，另外还有几个通用CSS文件，如：重置、布局、表单等

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

现在让我们来计算一下，假设每个CSS文件大约有10KB

我当前的方式：

• 一般文件中约50kb约5
• 在常规文件中下载请求
• 客户档案1中的大约10k
• 下载请求

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

单文件方法：

• 一个文件中约120kb（所有文件加在一起，包括目前未使用的样式）
• 一个下载请求

---

因此，在您看来，使用一个大文件和一个下载请求的有益收益，证明了实现一种将所有文件组合在一起的方法的所有额外工作以及所有这些麻烦都是合理的？

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

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

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

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

下面是我将使用的CSS示例块：

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

压缩时，它会稍微小一点（

81%

）原始大小：

---

您可以制作一个脚本来压缩CSS，因为您不应该手工进行压缩。谷歌“css迷你们”，我敢打赌你会发现很多。这与其说是性能提升，不如说是带宽提升。浏览器必须获取的每个文件表示大约200个额外字节。你可以有一个程序将多个CSS文件组合成一个用于部署，但大多数CSS缩小程序都会为你这样做。

我很惊讶没有人提到这么做的一个非常明显的原因

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

正如Blender建议的那样，缩小是对带宽的一种奖励。对于单个用户来说，2K更重要，但乘以1000或10000就太多了。如果你缩小了CSS，那么HTML呢？我还没见过这么多带有缩微HTML的网页

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