@import可用于引入外部CSS文件并管理全局样式，需置于文件开头，支持本地或远程文件及媒体查询条件加载，适合拆分语义化样式文件并通过主文件汇总，但因同步加载影响性能，建议减少嵌套并在HTML中用并行加载或使用构建工具优化。
在CSS中，@import 可以用来引入外部样式文件，适合用于管理全局样式，尤其是在需要将多个CSS文件合并为一个统一入口时。虽然现代前端开发更多使用构建工具（如Webpack）或预处理器（如Sass），但在纯CSS环境中，@import 仍是一个可行的选择。
1. 基本语法与使用方式
@import 必须写在CSS文件的最前面（任何其他规则之前），否则无效。它支持直接引入本地或远程的CSS文件。
示例：
@import url('reset.css');
@import url('variables.css');
@import url('components.css');
也可以省略 url() 和引号（但建议保留以确保兼容性）：
@import 'base.css';
2. 引入条件性样式（带媒体查询）
可以只为特定设备或屏幕尺寸加载样式，优化性能。
立即学习“前端免费学习笔记（深入）”；
@import url('print.css') print;
@import url('mobile.css') screen and (max-width: 768px);
这样只有满足条件时才会加载对应文件，避免不必要的资源请求。
3. 管理全局样式的组织策略
将全局样式拆分为多个语义化文件，通过一个主CSS文件统一引入，提升维护性。
推荐结构：- styles/
@import 'reset.css'; @import 'variables.css'; @import 'typography.css'; @import 'layout.css'; @import 'components.css';
4. 注意事项与性能建议
@import 是同步加载的，每多一层引入都会阻塞页面渲染，影响性能。
- 尽量减少嵌套 @import（避免在被导入的文件中再用 @import）
- 相比HTML中的 标签，@import 加载速度更慢，因为必须先下载主CSS文件才能发现导入需求
- 如果可能，建议在HTML中用多个 并行加载关键CSS，或使用构建工具打包合并
- 不适用于CSS-in-JS或模块化项目，更适合静态站点或简单项目
基本上就这些。@import 能帮你组织全局样式，但要注意性能和加载顺序。合理拆分 + 集中引入，可以在小项目中保持清晰结构。
