17370845950

现代 CSS 项目不推荐用 @import，因其阻塞并串行加载，导致关键样式延迟渲染；而 可并行加载、支持预加载与媒体查询条件加载，性能更优。

为什么现代 CSS 项目里不推荐用 @import

因为 @import 会阻塞并串行加载 CSS，导致关键样式延迟渲染，尤其在多层嵌套时性能雪崩。浏览器必须下载、解析完当前 CSS 文件后，才能发起 @import 指向的资源请求，无法与父文件并行。

@import 和 的加载行为差异

核心区别不在语法，而在加载时机和网络调度：

• 是 HTML 解析阶段就发现的资源，浏览器会立即发起并行请求（支持预加载、HTTP/2 多路复用）
• @import 是 CSS 解析阶段才识别的指令，此时 HTML 已基本解析完毕，后续样式表只能排队下载
• 即使写在 标签里，@import 仍要等该 内容下载完成才触发导入请求

哪些场景下 @import 还可能被误用

常见但危险的用法包括：

• 在 Sass/Less 中写 @import "reset" —— 这是预处理器指令，编译后已消失，不影响运行时，但容易让人混淆概念
• 为“逻辑分组”在主 CSS 里用 @import url("theme.css")，结果拖慢首屏
• 响应式中写 @import url("mobile.css") screen and (max-width: 768px) —— 媒体查询无效，@import 仍会无条件加载该文件

如何安全替换 @import

直接改用 并控制加载优先级：

注意：rel="preload" 需配合 onload 回调防止 FOUC；若用 media 属性做条件加载（如打印样式）， 比 @import 更可靠且不阻塞主流程。

真正难处理的是第三方 CSS 包里自带的 @import —— 你没法改，只能通过构建工具（如 PostCSS 插件 postcss-import）提前内联，或用 HTTP/2 Server Push（已逐步淘汰）缓解。这点常被忽略。