为什么@import不建议链接css？

Question

为什么@import不建议链接css？ @import无法执行哪些操作<link>并且@import是否与浏览器不兼容？

<Link>中的内容是否合适？ @import中有哪些专业有用吗？

我们应该始终使用<link>吗？

Answer 1

以下是一篇文章的链接，该文章讨论了表演以及<link> vs @import：don’t use @import;引用它的一小部分：

  

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

它不是那么古老的（它是从2009年4月开始 - 也就是不到一年前），所以它应该仍然大部分都是真的 - 它由Steve Souders编写，他的名字很好 - 在前端表演方面很有名。

在一个更主观的观点上，我更喜欢在我的主HTML文件中使用几个<link>：这样，我只能快速浏览一下css文件被调用的内容 - 或者查看模板上的模板文件服务器，或在客户端查看生成的HTML源。

Answer 2

Here's a pretty complete answer on about.com

文章中的细分：

  

@import和。之间的区别   <link>

     

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

     

<link> - 链接是第一种方法   包括外部样式表   在您的网页上。它的目的是   将您的网页与您的网页链接在一起   样式表。它被添加到了   这样的HTML文档：

     

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

     

@import - 导入   允许您导入一个样式表   进入另一个。这稍微有点   与链接方案不同，   因为你可以导入样式表   在链接的样式表中。但如果   你在头部包含一个@import   您的HTML文档，写成：

     

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

请参阅文章。

Answer 3

两种方法都符合标准。

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

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