@import 不该出现在现代 css 工程中，因其存在性能、可控性、兼容性三重风险；link 是唯一应被使用的外链方式，支持并行加载、媒体查询条件下载、preload 预加载及 js 动态注入，且优先级稳定、全浏览器兼容。
@import 不该出现在现代 CSS 工程中，它不是“次要选项”，而是明确有性能、可控性、兼容性三重风险的遗留语法；link 是唯一应被使用的外链方式。
为什么 @import 会拖慢首屏渲染
浏览器解析 HTML 时，遇到 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 - 实测：3 层嵌套
@import在弱网下比等效link多出 800ms+ 首屏阻塞时间
media 和 preload 在 @import 上完全无效
@import url("mobile.css") screen and (max-width: 768px) 看似合理，但浏览器仍会无条件下载 mobile.css —— 因为 @import 后的媒体查询只在 CSS 解析阶段生效，无法跳过初始请求。
正确做法是用 link：
<link href="mobile.css" media="screen and (max-width: 768px)" rel="stylesheet">
这样浏览器在不匹配条件时根本不会发请求。同理，rel="preload" as="style" 只对 link 有效，@import 不支持预加载。
运行时动态加载只能靠 link，@import 无法 JS 注入
想按需加载暗色主题或模块样式？只能操作 link 元素：
const link = document.createElement('link');<br>link.rel = 'stylesheet';<br>link.href = 'theme-dark.css';<br>document.head.appendChild(link);
以下写法不生效：
const style = document.createElement('style');<br>style.innerHTML = '@import url("theme-dark.css");';<br>document.head.appendChild(style);
原因：浏览器忽略运行时动态插入的 @import 规则，它只在 CSS 文件首次解析时起作用。
权重和兼容性差异常被低估
相同选择器下，link 引入的样式优先级高于 @import 引入的样式 —— 这不是玄学，而是浏览器解析顺序导致的层叠结果。更关键的是兼容性：
-
link是 HTML 标准标签，IE5+ 到 Chrome/Firefox/Safari 全部支持 -
@import是 CSS2.1 语法，在 Netscape 4 等极旧环境可能失效 - 现代构建工具（Vite/Webpack）打包时通常会把
@import提升或内联，但开发期调试时仍可能因未打包而暴露上述问题
真正容易被忽略的点是：哪怕你没手写 @import，第三方 CSS 库（比如某些老版本 Normalize 或 UI 组件包）内部仍可能含有多层 @import，它会悄无声息地拖慢你的首屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
