为啥不建议@import 链接css？

Posted 2023-03-06

【中文标题】为啥不建议@import 链接css？

【英文标题】：Why @import is not advisable to link css?为什么不建议@import 链接css？

【发布时间】：2011-01-15 05:57:53

【问题描述】：

为什么@import不建议链接css？什么@import不能做<link>可以做，@import和浏览器有什么不兼容的地方吗？

<Link> 中的哪些内容是可取的？还有@import有什么专业好用的吗？

我们应该总是，总是使用<link>吗？

【问题讨论】：

重复：***.com/questions/1022695/…

这能回答你的问题吗？ Difference between @import and link in CSS

【参考方案1】：

这是一篇关于表演的文章的链接，<link> vs @import：don’t use @import；引用其中的一小部分：

如果您使用 LINK 而不是 @import 想要下载样式表 并行产生更快的页面。

这不是那么老的（它是从 2009 年 4 月开始的——即不到一年前），所以它应该仍然大部分是正确的——而且它是由 Steve Souders 写的，他的名字很好- 以前端性能闻名。

在更主观的一点上，我更喜欢在我的主 html 文件中使用几个 <link> ：这样，我只需快速浏览一下 css 文件被称为什么——要么查看服务器上的模板文件，或者在客户端查看生成的 HTML 源代码。

【参考方案2】：

Here's a pretty complete answer on about.com

文章片段：

@import 和 @import 的区别 <link>

在决定使用哪种方法之前 包括你的样式表，你应该 了解这两种方法是什么 打算用于。

<link> - 链接是第一种方法 用于包含外部样式表 在您的网页上。它旨在 将您的网页与您的 样式表。它被添加到 您的 HTML 文档如下所示：

<link href="styles.css" type="text/css" />

@import - 导入 允许您导入一个样式表 进入另一个。这个有点 不同于链接场景， 因为你可以导入样式表 在链接的样式表内。但如果 你在头部包含一个@import 你的 HTML 文档，它是这样写的：

<style type="text/css">@import url("styles.css");</style> 来自 标准观点，没有 链接到一个 外部样式表或导入它。 无论哪种方式都是正确的，无论哪种方式 将同样有效（在大多数 例）。但是有几个原因 你可能想用一个 其他。

请参阅文章了解其余内容。

【讨论】：

Pascal 链接到的文章很好地解释了为什么您不想将两者混合使用。我在上面链接的那个并没有详细说明（我没想到它来自 about.com）

我已经阅读了这篇文章“这两种方法都符合标准，除非您计划支持真正旧的浏览器（如 Netscape 4），否则没有充分的理由使用任何一种。”在末尾说明

【参考方案3】：

两种方式都符合标准。

@import 方式在使用 javascript 动态添加 css 时有一个优势（例如在单页应用程序中，各种组件或页面按需引用自己的 css 文件）

这是因为您可以可靠地使用documents.styleSheets[n].cssRules 来了解样式表何时加载。链接元素的“加载”事件在某些浏览器中仍然存在故障。并且尝试在链接元素加载的样式表上使用 cssRules 可能会导致浏览器抱怨无法访问该 infoz