一、什么是@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的一部分，提供了樣式表引入的另一種方式。雖然它在某些場景下很有用，但在性能關鍵的場景下應謹慎使用。