css - 是否有理由仍然使用“@import”css 规则？

Question

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

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

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

score 11 · Accepted Answer

没有任何。使用<link>元素还具有摆脱FOUC的优势。

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

score 8 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

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

但是，这确实会减慢页面的加载速度，因为它只是更连续的 http 请求。

score 0 · Accepted Answer

我同意安德鲁的观点。我还使用导入来逻辑拆分我的 css。就我个人而言，我喜欢将它们分成 4 个：重置、结构、排版、一般（bgs/borders 等）

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

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

希望这可以帮助

score 0 · Accepted Answer

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

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

您可以在单独的样式表中定义 @media 以仅将适当的规则提供给正确的设备类型。

5 回答 5