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

Question

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

方法1

档案：css1.css

.
.
.
.
.css1style { }
.
.

档案：css2.css

.
.
.
.
.css2style { }
.
.

然后 文件：parent.css

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

方法2

Fle：parent.css

.css1style { }
.css2style { }

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

• 哪一个是正确的方式？
• 如果我选择方法1，我还会遵循雅虎的规则吗？
• 有没有更好的方法来做我正在尝试的事情？

Answer 1

我会将它们压缩成一个文件以减少http请求。 看看HTML5Boilerplate's Build Script。它允许您在单独的文件中编码并部署在一个缩小的文件中。这始终是最好的做法。

Answer 2

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

大多数工具也会压缩我们的CSS，同时删除不必要的空白区域，同时保持源样式表的美观和干净。

Answer 3

使用@import

时存在一些问题

1. 不同的浏览器会以不同的方式处理导入（旧版浏览器中的问题，现在可能无法使用）
2. 我猜IE6和IE7不支持@media。在链接标记中，您可以将媒体指定为屏幕，打印等。但IE6和IE7不支持CSS中的@media。因此，在使用@import时，在IE6和IE7中无法指定媒体类型。
3. 每次导入都会产生新的HTTP请求

方法1遵循雅虎规则。

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

Answer 4

使用方法1会导致对css1.css和css2.css文件的请求，因此如果您单独请求文件，则会发出3个请求而不是2个请求。将文件组合到单个文件（如方法2）将符合Yahoo规则。

Answer 5

最好的方法是组合所有文件，用YUI压缩器压缩它们。您可以在link

找到详细的帮助