CSS中的@import规则详解

描述
@import规则用于在CSS文件中导入外部样式表，允许模块化组织CSS代码。与HTML中的标签不同，@import是CSS语言的一部分，用于在样式表内部引入其他样式表。

语法结构

@import url("path/to/styles.css");
@import "path/to/styles.css";
@import url("path/to/print.css") print;
@import url("path/to/screen.css") screen and (max-width: 768px);

详细解析过程

1. 基本使用方法
@import必须位于CSS文件的最顶部，在所有其他规则之前（除了@charset规则）

/* 正确写法 */
@import "reset.css";
body { margin: 0; }

/* 错误写法 - @import不在顶部 */
body { margin: 0; }
@import "reset.css"; /* 这行会被忽略 */

2. 媒体查询支持
@import可以配合媒体查询条件，实现按条件加载样式表

/* 只在打印时加载 */
@import "print-styles.css" print;

/* 在屏幕设备且宽度小于768px时加载 */
@import "mobile.css" screen and (max-width: 768px);

/* 多个媒体查询条件 */
@import "theme.css" screen and (min-width: 768px) and (max-width: 1024px);

3. 与link标签的对比

• 加载顺序：link标签引入的样式表会并行加载，而@import引入的会串行加载
• 兼容性：link标签兼容性更好，@import在IE5+支持
• DOM操作：link标签可以通过JavaScript操作，@import不能
• 权重：两者引入的样式规则权重计算方式相同

4. 实际应用场景

/* main.css - 主样式文件 */
@import "variables.css";    /* 变量定义 */
@import "reset.css";        /* 重置样式 */
@import "components/";       /* 组件样式（需配合构建工具） */
@import "layouts/";          /* 布局样式 */

/* 条件加载 */
@import "large-screen.css" screen and (min-width: 1200px);

5. 性能考虑

• 优点：代码组织清晰，便于维护
• 缺点：多个@import会导致页面加载阻塞，影响性能
• 优化建议：生产环境建议合并文件，减少HTTP请求

6. 现代替代方案
随着构建工具发展，出现更好的模块化方案：

/* 使用CSS原生@import */
@import "components/button.css";

/* 使用预处理器（如Sass） */
@import "components/button";  // 省略扩展名

/* 使用PostCSS和构建工具合并优化 */

最佳实践总结

1. 开发环境可使用@import组织代码结构
2. 生产环境应通过构建工具合并文件
3. 关键路径CSS应直接内联或使用link标签
4. 条件加载样式考虑使用media属性而非@import
5. 大型项目推荐使用CSS模块或CSS-in-JS方案