CSS 属性 @import：外部スタイルシートのインポート

@import ルールは、あるスタイルシートを別のスタイルシートにインポートすることを可能にします。これは、CSSコードを複数のファイルに分割し、コードの保守性を向上させるのに役立ちます。

@import ルールの構文

@import ルールの基本的な構文は以下の通りです。

キーワード @import を使用する。
外部スタイルシートのURLを単一引用符または二重引用符で囲む（省略可能）。
相対URLまたは絶対URLを使用できる。
メディアクエリを使用して、スタイルシートを適用するメディアタイプを指定できる（省略可能）。

構文例：


    @import "style.css";
    @import url("style.css");
    @import 'https://www.example.com/style.css';
    @import url("style.css") screen and (max-width: 600px);

@import ルールの位置

@import ルールは、スタイルシート内の他のすべてのルール（@charset ルールを除く）の前に記述する必要があります。

誤った例	正しい例
`body { font-size: 16px; } @import "style.css";`	`@import "style.css"; body { font-size: 16px; }`

@import ルールの利点と欠点

利点

CSSコードの整理： CSSコードを複数のファイルに分割することで、コードの可読性と保守性が向上します。
オンデマンドでのスタイルシートの読み込み： メディアクエリを使用すると、デバイスや画面サイズに応じて異なるスタイルシートを読み込むことができます。

欠点

パフォーマンスの問題： @import を使用すると、追加のHTTPリクエストが発生するため、ページの読み込み時間が長くなる可能性があります。
ブラウザの互換性の問題： 一部の古いブラウザでは、@import ルールがサポートされていない場合があります。

@import と <link> タグの比較

@import ルールと <link> タグはどちらも外部スタイルシートをインポートするために使用できますが、いくつかの重要な違いがあります。

特徴	`@import`	`<link>`
種類	CSSルール	HTML要素
記述位置	スタイルシートの先頭のみ	HTMLの <head> タグ内
パフォーマンス	低い	高い
並列ダウンロード	不可	可能

<link> タグを使用したHTMLの例：


  <!DOCTYPE html>
  <html>
  <head>
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

  </body>
  </html>

ベストプラクティス

パフォーマンスと互換性の観点から、外部スタイルシートのインポートには <link> タグを使用することをお勧めします。
非常に古いブラウザとの互換性が必要な場合など、特定のケースでのみ @import ルールを使用してください。

まとめ

@import ルールは、外部スタイルシートをインポートする方法の1つですが、パフォーマンスや互換性の面でいくつかの欠点があります。そのため、基本的には <link> タグを使用し、必要に応じて @import ルールを使用することをお勧めします。

よくある質問

Q: @import ルールはなぜパフォーマンスが悪いのですか？
A: @import ルールは、ブラウザがHTMLの解析を完了した後にCSSファイルのダウンロードを開始するため、ページの表示が遅れる可能性があります。一方、<link> タグはHTMLの解析中にCSSファイルをダウンロードできるため、ページの表示速度が向上します。
Q: @import ルールと <link> タグのどちらを使うべきですか？
A: 特に理由がない限り、<link> タグを使用することをお勧めします。 <link> タグは、パフォーマンス、ブラウザの互換性、保守性の面で優れています。
Q: @import ルールを使うべきケースはありますか？
A: 非常に古いブラウザとの互換性が必要な場合や、JavaScriptを使用して動的にスタイルシートを読み込む必要がある場合など、特定のケースでは @import ルールが有効な場合があります。