是现代项目唯一推荐的css外链方式，因其并行下载、支持preload和media条件加载、可js动态插入且无兼容风险；@import强制串行阻塞、引发fouc、不支持动态注入和条件跳过，弱网下首屏延迟可达800ms+。
现代项目里，<link> 是唯一推荐的 CSS 外链方式，@import 应该被当作遗留写法规避——不是“不推荐”，而是“有明确风险”。
为什么 <link> 加载更快、更可控
浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会立即发起网络请求，并且多个 <link> 默认并行下载；而 @import 必须等它所在的 CSS 文件（无论是 <style></style> 块还是外部 CSS）完全下载、解析完，才开始加载被 import 的资源。
这意味着：
- 一个
@import url("a.css")后面再跟@import url("b.css")，b.css会卡在a.css完全就绪之后才启动请求 - PageSpeed Insights 报 “Render-blocking resources”，但你只写了 1 个
<link>？大概率是它引入的 CSS 里嵌了多层@import，把关键样式拖慢了 2–3 秒 - 实测：3 层嵌套
@import在弱网下比等效<link>多出 800ms+ 首屏阻塞时间
@import 无法配合 media 或 preload 做条件加载
<link> 支持 media 属性做媒体查询懒加载（比如 media="print" 的样式不会阻塞屏幕渲染），也支持 rel="preload" as="style" 提前拉取关键 CSS；@import 完全没这些能力。
典型误用：@import url("mobile.css") screen and (max-width: 768px) —— 这句语法看似合理，但无效。@import 后的媒体查询只在 CSS 解析阶段生效，无法阻止初始下载。浏览器仍会无条件加载 mobile.css。
正确做法是：<link href="mobile.css" media="screen and (max-width: 768px)">，浏览器会跳过下载直到匹配条件。
JS 动态加载只能用 <link>，@import 不可 runtime 注入
运行时想按需加载主题或模块样式？只能操作 <link> 元素：document.createElement("link") + appendChild；@import 是纯 CSS 规则，JS 无法生成或注入它。
以下写法不生效：
const style = document.createElement('style');
style.innerHTML = '@import url("theme-dark.css");';
document.head.appendChild(style);
原因：浏览器忽略运行时动态插入的 @import 规则。它只在 CSS 文件首次解析时起作用。
兼容性与权重差异容易被低估
<link> 是 HTML 标准标签，IE5+ 到 Chrome/Firefox/Safari 全部支持；@import 是 CSS2.1 引入的语法，虽主流浏览器都支持，但在极旧环境（如 Netscape 4）可能失效。
更重要的是权重：相同选择器下，<link> 引入的样式优先级高于 @import 引入的样式。这不是 bug，是规范行为——因为 <link> 属于文档层级，@import 属于样式表内部引用，后者天然低一级。
真正麻烦的是：这个差异往往只在调试时才暴露，上线后才发现某些样式莫名被覆盖，而排查路径又绕（得查引入顺序+嵌套层级+是否混用）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
