【CSS】import

在 CSS 中,@import 是一种用于导入外部样式表的规则。它可以将一个 CSS 文件中的样式引入到另一个 CSS 文件中,使得样式可以在多个文件中共享和重用。

CSS 的引用方式有:

  1. 外联: link 标签外部链接样式表
  2. 内联: 在 head 中使用 style
  3. 嵌入: 在元素的开始标记里通过 style 属性定义样式

其中,url 是要导入的外部样式表 URL 地址,可以是本地文件路径或者是网络地址。

例如,要将一个为 "styles.css" 的外部样式表导入到另一个 CSS 文件中,可以使用以下代码:


@import "styles.css";

@import 规则必须放在 CSS 文件的最前面,位于其他任何 CSS 规则的前面。这样,当浏览器解析 CSS 文件时,会先加载和应用导入的样式表,然后再继续解析和应用后续的 CSS 规则。

另外,@import 还支持一些选项和参数,例如媒体查询(media query),可以根据不同的设备或屏幕尺寸导入不同的样式表。

@import 和 link 的区别:

  • @import 是 CSS 提供的规则,用于在 CSS 文件中导入外部样式表,位于 CSS 文件的最前面,同步加载,可能导致页面加载变慢,存在加载顺序,比如 a.css 里面包含 b.css,对于老的浏览器不支持。
  • link 是 HTML 的标签元素,用于引用外部资源,包括 CSS 文件,可以放在标签中任何位置,支持异步加载,不会阻塞 HTML析和其他资源的下载。当用 js 控制 dom 去改变样式的时候,只能使用 link,因为 @import 不是 dom 可以控制的。

另外,从性能优化的角度来讲,尽量要避免使用@import。

使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个CSS文件 被下载、解析之后,浏览器才会知道还有另外一个CSS需要下载,这时才去下载,然后下载后开始解析、构建 Render Tree 等一系列操作。

多个@import会导致下载顺序紊乱。在IE中,@import会引发资源文件的下载顺序被打乱,即排列在@import 后面的JS文件先于@import下载,并且打乱甚至破坏@import自身的并行下载。


这是一个从 https://juejin.cn/post/7368294440547811366 下的原始话题分离的讨论话题