在页面中加载多个CSS的正确方法

根据雅虎的说法，我们必须限制服务器的请求数量，以提高网站的性能。同意这一点，我想合并我的CSS文件，但我不确定下面哪种方法是合适的或正确的

方法1 文件：css1.css

.
.
.
.
.css1style { }
.
.

文件：css2.css

.
.
.
.
.css2style { }
.
.

然后 文件：parent.css

@import "css1.css";
@import "css2.css";

.css1style { }
.css2style { }

方法2 Fle:parent.css

@import "css1.css";
@import "css2.css";

.css1style { }
.css2style { }

当我们有一个非常大的样式表集合时，方法2可能会产生可管理性问题

• 哪一种是正确的方法
• 如果我使用方法1，我是否仍然遵循雅虎的规则
• 有没有更好的方法来做我正在尝试的事情

---

为了减少http请求，我会将它们压缩到一个文件中。

---

看这张照片。它允许您在单独的文件中编码，并在一个缩小的文件中部署。这始终是最佳实践。

使用方法1会导致对

css1.css

和

css2.css

文件的请求，因此如果单独请求文件，您将发出3个请求，而不是2个请求。将文件合并到单个文件（如方法2）将符合Yahoo规则。

最好的方法是使用某种构建过程，将所有源css合并到一个文件中（类似于方法2），但保留原始css，以便在多个文件中进行开发和调试。有很多工具可以帮助实现这一点，根据您的平台和您使用的任何framewroks，不同的工具具有不同的优势。如果您对ruby也感到满意，您可能还想看看sass，它非常适合组织CSS代码。如果您使用的是php，我衷心推荐minify，它也可以使用JavaScript

---

大多数工具也会为您压缩我们的CSS，删除不必要的空白，同时保持源样式表整洁

最好的方法是合并所有文件，用YUI压缩程序压缩它们。您可以在此找到详细的帮助

使用@import时出现一些问题

不同的浏览器对导入的处理方式不同（在旧浏览器中是一个问题，现在可能不使用）

我猜IE6和IE7不支持@media。在链接标签中，您可以将媒体指定为屏幕、打印等，但IE6和IE7不支持CSS中的@media。因此，在使用@import时，在IE6和IE7中无法指定媒体类型

每次导入都会产生一个新的HTTP请求

方法1确实遵循Yahoo规则

---

您可以在开发环境中将CSS拆分为多个文件，在部署到生产环境时，您可以将它们合并在一起。

不要使用

@import

。不要手动将单独的CSS文件合并为一个。听一下建议构建脚本的答案。你如何看待缩小而不是你的建议。构建脚本进行了几次性能优化。如果你只是想让你的CSS像这样运行，你就可以使用minify。性能优化，如果构建脚本这样做，不是更好吗？我还认为，这个脚本是手动的，不像minify，它会根据每个请求逐步构建CSS和javascript。