CSS中的@import指令
一、什么是@import指令？
@import 是CSS提供的一种引入外部样式表的方式，允许开发者在CSS文件中引入其他CSS文件，或者在HTML的<style>标签中引入外部样式。与常见的<link>标签相比，@import 提供了一种更“CSS原生”的样式引入方式，特别适合用于模块化开发。
二、@import的基本用法
（一）在HTML文件中导入外部样式
<style>@import url('./styles/main.css');@import url('./styles/theme.css');
</style>
注意：在HTML中使用@import时，必须将其包裹在<style>标签内。
（二）在CSS文件中引入其他CSS文件
/* main.css */
@import url('./reset.css');
@import url('./components.css');body {font-family: Arial, sans-serif;
}
这种方式可以实现CSS文件的模块化管理，特别适合大型项目。
（三）配合媒体查询使用
@import 支持条件引入，可以根据不同的媒体类型或特性加载不同的样式表：
@import "print.css" print; /* 只在打印时应用 */
@import "mobile.css" screen and (max-width: 768px); /* 小屏幕设备专用 */
三、@import与<link>的区别
虽然@import和<link>都能引入外部CSS文件，但它们之间存在重要差异：
| 特性 | <link>标签 | @import指令 |
|---|---|---|
| 所属规范 | HTML标签 | CSS指令 |
| 功能范围 | 可加载CSS、定义RSS等 | 仅能加载CSS |
| 加载顺序 | 并行下载，不阻塞渲染 | 串行下载，可能阻塞渲染 |
| 兼容性 | 所有浏览器 | IE5+ |
| DOM可控性 | 可通过JS动态修改 | 无法通过JS控制 |
| 媒体查询支持 | 通过media属性支持 | 直接支持 |
| 权重 | 按出现顺序计算 | 总是先于宿主CSS文件中的规则 |
（一）加载性能
<link>标签支持并行下载，不会阻塞页面渲染，因此加载速度更快。@import是串行下载的，可能会阻塞页面渲染，导致页面加载速度变慢。
（二）权重
<link>标签引入的CSS规则按其在HTML文档中的出现顺序计算权重。@import引入的CSS规则总是先于宿主CSS文件中的规则，可能会导致样式冲突。
四、最佳实践建议
（一）优先使用<link>标签
对于主要的CSS文件，推荐使用<link>标签引入，以获得更好的加载性能。<link> 标签支持并行下载，不会阻塞页面渲染，适合用于生产环境。
（二）合理使用@import的场景
- 开发环境：在开发环境中，
@import可以用于CSS模块化管理，方便开发者快速调试和修改。 - 条件加载：对于需要条件加载的CSS文件（如打印样式或移动端样式），
@import是一个不错的选择。 - 第三方组件库：引入第三方组件库的样式时，
@import可以减少对HTML结构的修改。
（三）避免深层嵌套
不要在多级CSS文件中大量使用@import，这会导致复杂的依赖关系，增加维护难度。建议最多嵌套两层。
（四）考虑使用构建工具
在现代前端开发中，可以考虑使用Sass/Less的@import或构建工具（如webpack）的CSS处理能力。这些工具在构建时会处理CSS合并问题，优化加载性能。
五、总结
@import 指令作为CSS的一部分，提供了样式表引入的另一种方式。虽然它在某些场景下很有用，但在性能关键的场景下应谨慎使用。