Question

我有一个电子商务网站，其中有大约8个CSS文件从标题链接 - 导致8个单独的http请求到服务器。我将所有CSS文件合并为一个大文件，产生一个67kb（！）文件 - 将我们的css文件的http请求减少到1。

我发现这个大小的CSS文件有点难以管理，因为我不断在网站上进行更新。我担心的是我的用户可能会在更新过程中看到我，并在从一个页面移动到另一个页面时看到一个非风格的页面 - b / c 67kb仍然需要2-3秒才能通过FTP成功放置在远程服务器上

我的问题是：在这个大型CSS文件中使用@import将文件分解成更小的更易管理的大小（在CSS文件中）是否会在加载页面时将我们带回原来的8个http请求？或者CSS中的@imports以某种方式处理不同的方式？

Answer 1

是的，在使用@import时，您将返回每个样式表的请求。

最好的办法是将css缩小并整合到一个文件中进行部署。但你仍然可以使用单独的文件进行开发。

Answer 2

您可以通过将样式表与.htaccess组合来阻止额外的http请求。该技术在HTML5 Boilerplate .htaccess中进行了解释。它的工作原理如下：

在.htaccess中：

<FilesMatch "\.combined\.(js|css)$">
    Options +Includes
    SetOutputFilter INCLUDES
</FilesMatch>

在style.combined.css中：

<!--#include file="reset.css"-->
<!--#include file="style.css"-->

您可以使用它来组合.js（或您在括号中放置的任何其他扩展名。）

选项+包含的文档是here。

Answer 3

浏览器必须以某种方式获取数据，那么它怎么能不使用另一个http请求呢？ ; - ）

但是，如果您只更改一个文件而其他七个文件保持不变，那么您也可以从浏览器缓存中受益。

您可以尝试嗅探客户端和服务器之间的连接，看看它的请求。

Answer 4

是的，为每个@import声明发出单独的请求。

您可以通过快速测试来检查;写一个HTML片段，包括一个导入第二个CSS文件的CSS文件。在Firebug的网络面板中查看结果会显示每个CSS文件的两个单独请求。这是我用来确认这个答案的测试。

Answer 5

CSS处理的处理方式与页面上任何其他“include”的处理方式不同，例如对外部JavaScript脚本的引用。但是，除了首次访问您的网站之外，浏览器缓存应该使其成为非问题。

Answer 6

如果你有一个67 Kb的CSS文件，那就有些奇怪了。请记住，CSS中的C用于CASCADING，这意味着您不必在每个类中定义该类中涉及的每个标记的所有属性。

例如，如果您定义＆lt; DIV id =“maincontainer”＆gt;作为容器，您可以为其定义一个类

#maincontainer {font-face:Arial,helvetica,sans;}

这意味着如果你为标签＆lt; P＆gt;创建了它的子类。像

#maincontainer P {color:darkgray;}

所有＆lt; P＆gt; DIV主容器内的标签将使用字体arial，helvetica，sanz。

还尝试创建CSS文件，以便在页面中使用它们。所有站点的唯一CSS文件使得加载许多不会在某些页面中使用的类。分而治之。