@import指令与link的区别及二者的使用注意事项

Posted 2020-09-18 Lu_Lu的攻城路

首先，二者都是从外部引入css文件的方式，其中@import语句需要放在css文件或者style标签中，且必须放在开头部分！

<link rel=‘stylesheet‘ href=‘a.css‘>
Or you can use the @import rule:

<style>
@import url(‘a.css‘);
</style>

@import VS  Link ，二者的区别

1. link属于XHTML标签，而@import完全是CSS提供的一种方式；
2. 加载顺序的差别。比如，在a.css中使用import引用b.css, 只有当使用当使用import命令的宿主css文件a.css被 被下载、解析之后，浏览器才会知道还有另外一个b.css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作.
3. 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4. 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

综上：

编码规范建议不要使用 @import

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

• 使用多个 <link> 元素
• 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
• 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

参考文章：

http://codeguide.bootcss.com