绝大多数情况下不该用@import，因其阻塞串行加载导致渲染延迟；仅适合CSS内媒体查询条件引入、维护遗留代码或构建时已预编译合并的场景。
什么时候该用 @import 而不是
绝大多数情况下，不该用 @import。它会阻塞并串行加载样式，导致 CSS 渲染延迟，尤其在多层嵌套时（比如 A.css @import B.css，B.css 又 @import C.css），浏览器必须等前一个下载解析完才发起下一个请求。而 是并行加载的，性能优势明显。
真正适合 @import 的场景极少，典型的是：
- 需要在 CSS 文件内部做条件引入（比如媒体查询内动态加载主题）
- 维护遗留代码时被迫兼容已有
@import链路 - 构建流程中已将所有
@import提前编译合并（此时它只存在于源码，不出现在最终 HTML 中）
@import 的语法细节和常见写错点
@import 必须出现在样式表最顶部（在任何实际规则之前），且不能放在 @media 外部的嵌套块里。下面这些写法都会失效或报错：
-
@import url("theme.css") screen and (min-width: 768px);→ 错误：媒体查询必须包裹整个@import，不能只修饰 URL -
body { color: red; } @import "reset.css";→ 错误：规则之后不能再有@import -
@import 'https://fonts.googleapis.com/css2?family=Roboto';→ 可能失败：部分浏览器对跨域@import有严格限制，且无CORS头时会被拒绝
正确写法只有两种主流形式：
