Question

我最近在Coda.com上发现了@import规则的使用。他们实际上是用来导入网站的主样式表，特别是格式：

<style type="text/css" media="screen">
  @import url(./coda.css);
</style>

这将隐藏Netscape 3和IE 3和4的规则。由于Web开发工具主要受众将使用现代浏览器，还有什么其他原因可以使用它而不是链接？

Answer 1

无。使用<link>元素还具有摆脱FOUC。

的优势

编辑：在另一个样式表（@import文件）中使用.css可以像C中的#include一样使用，但没有任何理由在 @import块中使用<style> 。

Answer 2

对于Coda的网站，我想他们更多的是出于习惯而不是迫切的技术需求。

实际CSS文件中的

@import语句（不在HTML中的<style>元素中）有很多用途，例如可以轻松地交换进出其他CSS文件。 Blueprint CSS框架可以让您轻松删除框架的某些部分，例如排版内容或网格内容。

当然，在生产环境中，使用一堆@import语句是不受欢迎的，因为它会增加Web浏览器必须下载的文件数。

Answer 3

今天使用此规则的唯一原因是通过将CSS拆分为不同的文件（例如库）来使CSS更加模块化。

因此，虽然您的页面可能链接到一个样式表，但该样式表可以@import其他样式表进行重置，排版等。

然而，这确实减慢了页面的加载速度，因为它只是更多顺序的http请求。

Answer 4

我同意安德鲁。我也使用导入逻辑上拆分我的CSS。我个人喜欢在4中拆分它们：重置，结构，排版，一般（bgs / border等）

根据执行此操作的人，他们的风格和偏好，css文件也可以按页面部分拆分，例如header.css，footer.css等。

我要做的另一件事是避免多个http请求，它有一个构建过程，它合并（按导入的顺序）并压缩css文件以进行实时部署。

希望这有帮助

Answer 5

我自己使用模块化开发方法，并且通常最终会有10个以上的CSS文件。如您所知，这是一个非常大量的HTTP请求，所以我喜欢使用Blender。

Blender是一个rubygem，可以将任意数量的CSS文件合并并缩小为单个样式表。它也适用于JavaScript。

您可以在各个样式表中定义@media，以便仅为正确的设备类型提供适当的规则。