我有一个电子商务网站，其中包含从标题链接的大约 8 个 CSS 文件 - 导致 8 个单独的 http 请求到服务器。我将所有 CSS 文件合并为 1 个大文件，生成一个 67kb (!) 文件 - 将我们的 css 文件的 http 请求减少到 1 个。
我发现这个大小的 CSS 文件有点难以管理，因为我经常在网站上执行更新。我担心的是我的用户可能会在更新过程中发现我并在从一个页面移动到另一个页面时看到一个非样式页面 - b/c 67kb 仍然需要 2-3 秒才能通过 FTP 成功放置在远程服务器上.
我的问题是：在这个大的 CSS 文件中使用 @import 将文件分解成更小的更易于管理的大小（在那个 CSS 文件中）是否会让我们在页面加载时回到原来的 8 个 http-requests？还是 CSS 中的 @imports 处理方式不同？
【问题讨论】：
标签： css
是的，您将在使用@import 时返回每个样式表的请求。
最好的办法是将 css 压缩并整合到一个文件中以进行部署。但是您仍然可以使用单独的文件进行开发。
【讨论】：
您可以通过将样式表与 .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（或您放在括号中的任何其他扩展名。）
Options +Includes 的文档是here。
【讨论】：
浏览器必须以某种方式获取数据，那么它怎么能不使用另一个http请求呢？ ;-)
但也有可能，如果您只更改一个文件而其他七个文件不变，您将从浏览器缓存中受益。
您可以尝试嗅探客户端和服务器之间的连接并查看它的请求。
【讨论】：
是的，每个@import 语句都会发出一个单独的请求。
您可以通过快速测试进行检查；编写 HTML 片段，包括导入第二个 CSS 文件的 CSS 文件。在 Firebug 的网络面板中查看结果会显示对每个 CSS 文件的两个单独的请求。这是我用来确认这个答案的测试。
【讨论】：
CSS 导入的处理与页面上的任何其他“包含”没有任何不同，例如对外部 JavaScript 脚本的引用。但是，除了首次访问您的网站外，浏览器缓存应该不会导致此问题。
【讨论】：
如果您有一个 67 Kb 的 CSS 文件，那就有些奇怪了。请记住，CSS 中的 C 用于 CASCADING，这意味着您不必在每个类中定义该类中涉及的每个标签的所有属性。
例如，如果您将
#maincontainer {font-face:Arial,helvetica,sans;}
表示如果为标签
创建它的子类就像
#maincontainer P {color:darkgray;}
DIV 主容器内的所有
标签都将使用字体 arial、helvetica、sanz。
还可以尝试创建 CSS 文件以了解它们在页面中的使用方式。所有站点的唯一 CSS 文件可以加载许多不会在某些页面中使用的类。分而治之。
【讨论】：