一、什么是@import指令？

@import 是CSS提供的一种引入外部样式表的方式，允许开发者在CSS文件中引入其他CSS文件，或者在HTML的<style>标签中引入外部样式。与常见的<link>标签相比，@import 提供了一种更“CSS原生”的样式引入方式，特别适合用于模块化开发。

二、@import的基本用法

（一）在HTML文件中导入外部样式

注意：在HTML中使用@import时，必须将其包裹在<style>标签内。

（二）在CSS文件中引入其他CSS文件

这种方式可以实现CSS文件的模块化管理，特别适合大型项目。

（三）配合媒体查询使用

@import 支持条件引入，可以根据不同的媒体类型或特性加载不同的样式表：

三、@import与<link>的区别

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