BFE.devでのAI解答例 - フロントエンド面接質問
74. CSSでの @import はどう動く？

<link> 要素を使用して外部のCSSを読み込む場合、ブラウザはページを読み込む際に別々のリクエストを行いますが、 @import を使用する場合、CSSファイル内に他のCSSファイルをインポートすることができます。

@import のメリットは、CSSを使ってナビゲーションバーやフッターのような要素を共有する場合など、複数のCSSファイルを使用しなければならない場合にコードを簡潔に保つことができることです。また、 @import は、ブラウザが一度に１つのCSSファイルしか読み込まないため、ページのロードが遅くなることを避けるために使用できます。

<link> 要素のメリットは、ページの読み込み速度が速くなることです。 @import は、外部のCSSファイルとの通信を増やすため、ページの読み込みが遅くなる可能性があります。また、 @importは、CSSファイル内のセレクターやスタイルがページのロードに先立って処理されるため、遅れて適用される場合があります。