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的一部分，提供了样式表引入的另一种方式。虽然它在某些场景下很有用，但在性能关键的场景下应谨慎使用。