@import 必须置于 CSS 文件开头，可结合媒体查询按设备特性加载样式，如打印、小屏或深色模式，避免冗余下载。但其阻塞渲染、无法并行加载且不支持预加载，性能不如 <link> 标签。建议优先使用 <link> 控制关键样式加载，仅在非核心场景（如主题、打印）用 @import 配合媒体查询实现条件引入，并确保语法位置正确以避免失效。
使用 @import 可以在 CSS 文件中引入其他样式表，结合媒体查询能实现按设备特性或屏幕条件加载对应样式，从而优化页面渲染性能和资源利用。虽然现代开发更推荐使用 <link> 标签配合媒体属性来控制加载时机，但 @import 仍可在特定场景下发挥作用。
理解 @import 的基本语法
@import 必须写在 CSS 文件的最开始位置，用于导入另一个样式文件。基础写法如下：
-
@import "base.css";—— 无条件导入 base.css -
@import url("theme.css");—— 使用 url() 函数导入
注意：任何规则（如 body{}）出现在 @import 前会导致该语句失效。
通过媒体查询按需加载
可以在 @import 后添加媒体查询，使样式仅在匹配条件下被下载和解析：
立即学习“前端免费学习笔记（深入）”；
-
@import "print.css" print;—— 仅当打印时加载 -
@import "mobile.css" screen and (max-width: 768px);—— 小屏幕设备加载 -
@import "dark-theme.css" (prefers-color-scheme: dark);—— 用户偏好深色主题时加载
这种方式避免了所有用户都下载不必要的样式，减少初始负载。
与 link 标签对比及性能考量
尽管功能相似，@import 存在一些局限性：
- 阻塞渲染：被导入的文件会延迟主样式表的执行，可能导致白屏时间延长
- 无法并行加载：浏览器必须先下载主 CSS 才能发现导入规则，影响加载效率
- 不支持预加载提示：不能通过
rel="preload"提前获取资源
相比之下，HTML 中使用 <link href="style.css" media="print"> 能让浏览器尽早发现资源，并根据媒体类型决定是否立即下载，更适合性能优化。
实际建议与最佳实践
若仍需使用 @import 实现条件加载，请遵循以下原则：
- 确保所有
@import位于文件顶部，防止规则失效 - 优先用
<link>替代，特别是在关键路径上的样式 - 将非核心样式（如主题、打印、特殊设备适配）用媒体查询隔离
- 测试不同设备下的加载行为，确认预期资源未被误载
基本上就这些——合理利用条件加载机制，才能真正提升用户体验。
