@import可用于CSS模块化管理，通过在主文件引入base、layout等独立样式提升可维护性，支持按媒体查询条件加载以优化性能，但存在增加HTTP请求、解析延迟等问题，适合轻量项目。
使用 @import 可以在 CSS 中引入外部样式文件，实现样式的模块化管理。虽然它不如现代构建工具（如 Sass 或 CSS Modules）强大，但在纯 CSS 环境中仍是一种简单有效的组织方式。
1. 基本语法
@import 必须写在 CSS 文件的最前面（除 @charset 外），用于导入另一个 CSS 文件。
@import "layout.css";
@import url("theme.css");
以上三种写法都有效，url() 和引号可结合使用，也可省略 url() 直接用字符串。
2. 按功能拆分模块
将不同功能的样式写入独立文件，再通过主 CSS 文件统一引入，提升可维护性。
立即学习“前端免费学习笔记（深入）”；
- base.css：重置样式、通用类、基础字体和颜色变量
- layout.css：页面布局结构，如头部、侧边栏、网格系统
- components.css：按钮、卡片、表单等组件样式
- theme.css：主题色、暗黑模式等视觉风格
主样式文件（如 style.css）：
@import "layout.css";
@import "components.css";
@import "theme.css";
3. 支持媒体查询条件导入
可以只为特定设备或屏幕尺寸加载模块，优化性能。
@import url("print.css") print;@import url("mobile.css") screen and (max-width: 768px);
这样只在打印时加载 print.css，或仅在小屏设备加载移动样式，避免资源浪费。
4. 注意事项与局限性
@import 虽然方便，但有一些关键限制需要了解：
- 每个
@import都会发起一次额外的 HTTP 请求，可能影响页面加载速度 - 浏览器必须解析完主文件才能发现并请求被导入的文件，造成延迟
- 不支持动态加载或按需引入，所有模块都会被加载
- 调试时难以追踪样式来源，尤其嵌套导入时
因此，在大型项目中建议配合预处理器（如 Sass 的 @use 或 @forward）或构建工具进行模块化，@import 更适合轻量级项目或快速原型开发。
基本上就这些。合理使用 @import 能让 CSS 结构更清晰，但要注意性能和维护成本。不复杂但容易忽略。
