@import必须位于CSS文件开头，支持导入样式表和媒体查询条件加载，可用于模块化组织代码，但会同步阻塞、影响性能，不支持预加载且调试困难，相比link标签并行加载更差，建议用构建工具或预处理器处理依赖，生产环境避免多层嵌套，仅作过渡使用。
CSS 中的 @import 规则允许你在当前样式表中导入另一个样式表，常用于模块化组织 CSS 文件。虽然功能可用，但使用时需注意性能影响和浏览器行为。
基本语法与使用方式
@import 必须写在 CSS 文件的最前面（除 @charset 外），否则无效。支持两种写法：
- @import "styles.css";
- @import url("styles.css");
还可配合媒体查询实现条件加载：
@import url("print.css") print;@import url("mobile.css") screen and (max-width: 768px);
按需加载的实际应用
通过 @import 可将样式拆分为基础、组件、主题等模块，实现逻辑分离：
立即学习“前端免费学习笔记（深入）”；
- 主文件 main.css 导入其他部分：
@import "reset.css";
@import "layout.css";
@import "components/button.css";
@import "theme/dark.css"; - 适合开发阶段组织代码，便于维护和协作
但所有导入文件会在页面解析到该规则时发起请求，不会阻塞渲染，但会延迟样式生效时间。
与 link 标签对比的局限性
@import 是同步加载，每个导入都会阻塞后续资源，且无法被预加载提示优化。而 HTML 中的 <link rel="stylesheet"> 可并行加载，性能更优。
- 多个
@import嵌套会导致请求串行，增加白屏时间 - 不支持 HTTP/2 推送或 preload 预加载机制
- 调试时难以定位来源，浏览器开发者工具显示层级较深
推荐的文件组织策略
尽管 @import 在原生 CSS 中存在，现代项目更建议：
- 使用构建工具（如 Webpack、Vite）合并 CSS 模块
- 用 Sass、Less 的
@import或@use在编译阶段处理依赖 - 生产环境输出单一或分块优化后的 CSS，避免运行时导入
若必须使用原生 @import，应控制层级不超过一层，并确保关键样式内联或通过 link 提前加载。
基本上就这些。合理组织样式结构更重要，@import 可作为过渡手段，但不推荐在高性能要求项目中广泛使用。
