现代 CSS 项目不推荐用 @import，因其阻塞并串行加载，导致关键样式延迟渲染；而 <link> 可并行加载、支持预加载与媒体查询条件加载，性能更优。
为什么现代 CSS 项目里不推荐用 @import
因为 @import 会阻塞并串行加载 CSS，导致关键样式延迟渲染，尤其在多层嵌套时性能雪崩。浏览器必须下载、解析完当前 CSS 文件后，才能发起 @import 指向的资源请求，无法与父文件并行。
@import 和 <link> 的加载行为差异
核心区别不在语法，而在加载时机和网络调度：
-
<link rel="stylesheet">是 HTML 解析阶段就发现的资源，浏览器会立即发起并行请求（支持预加载、HTTP/2 多路复用） -
@import是 CSS 解析阶段才识别的指令，此时 HTML 已基本解析完毕，后续样式表只能排队下载 - 即使写在
<style>标签里，@import仍要等该<style>内容下载完成才触发导入请求
哪些场景下 @import 还可能被误用
常见但危险的用法包括：
- 在 Sass/Less 中写
@import "reset"—— 这是预处理器指令，编译后已消失，不影响运行时，但容易让人混淆概念 - 为“逻辑分组”在主 CSS 里用
@import url("theme.css")，结果拖慢首屏 - 响应式中写
@import url("mobile.css") screen and (max-width: 768px)—— 媒体查询无效，@import仍会无条件加载该文件
如何安全替换 @import
直接改用 <link> 并控制加载优先级：
立即学习“前端免费学习笔记（深入）”；
<!-- 替换前 -->
<style>
@import url("base.css");
@import url("components.css");
</style>
<p><!-- 替换后：并行加载 + 可加 preload 提升优先级 -->
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="components.css">
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">注意：rel="preload" 需配合 onload 回调防止 FOUC；若用 media 属性做条件加载（如打印样式），<link media="print"> 比 @import 更可靠且不阻塞主流程。
真正难处理的是第三方 CSS 包里自带的 @import —— 你没法改，只能通过构建工具（如 PostCSS 插件 postcss-import）提前内联，或用 HTTP/2 Server Push（已逐步淘汰）缓解。这点常被忽略。
