是否仍有理由使用"@import" CSS规则？

Question

我最近在Coda.com上发现了@import规则的用法。实际上，他们正在使用它来导入站点的主样式表，具体格式如下：

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

使用此方法可以隐藏规则，以便Netscape 3和IE 3和4无法看到它们。由于Web开发工具的主要受众将使用现代浏览器，除了链接之外，还有什么其他原因可以使用此方法呢？

- Sasha Sklar

Answer 1

没有。使用<link>元素的好处之一是去除FOUC。

编辑：在另一个样式表(.css文件)中使用@import，就像在C语言中使用#include一样，但没有任何理由在<style>块中使用@import。

- Ben Alpert

Answer 2

对于Coda网站，我想他们这样做更多是出于习惯而不是任何紧迫的技术需求。

在实际的CSS文件中（而不是在HTML的<style>元素中），@import语句有很多用途，例如使换入和换出其他CSS文件变得容易。Blueprint CSS框架就是这样做的，让您轻松删除框架的某些部分，如排版或网格等内容。

当然，在生产环境中，使用大量@import语句是被反对的，因为它会增加Web浏览器必须下载的文件数量。

- Tyson

Answer 3

今天使用此规则的唯一原因是通过将其拆分为不同文件（如库）使CSS更模块化。因此，虽然您的页面可能链接到一个样式表，但该样式表可以@import其他样式表来进行重置、排版等。

但是，这会减慢页面的加载速度，因为它只是更多的顺序http请求。

- Andrew Vit

Answer 4

我同意Andrew的观点。我也使用导入来逻辑地拆分我的CSS。个人而言，我喜欢将它们分为4个部分：重置、结构、排版、常规（背景/边框等）

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

然而，我额外做的一件事是为了避免多个HTTP请求，在构建过程中合并（按导入顺序）和压缩CSS文件以进行实时部署。

希望这有所帮助。

- Darko Z

Answer 5

我自己使用模块化开发方法，通常会得到10多个单独的CSS文件。如你所知，这是相当大量的HTTP请求，因此我喜欢使用Blender。

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

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

- Mark