外部スタイルシートまたはインラインスタイルの両方を含むCSSスタイルをWebページに適用するには、さまざまな方法があります 。 外部スタイルシートを使用している場合、HTML文書のルックアンドフィールを指定するには、@importを使用することをお勧めします。
@importルールを使うと、ドキュメント内の重要な外部スタイルシートを、HTMLページに入れることも、他のCSSドキュメントに含めることもできます。 多くのスタイルを多数の小さなファイル（レイアウト用、 タイポグラフィ用、イメージ用など）に分割することで、それらのファイルとその中に含まれるさまざまなスタイルをより簡単に管理できます。 その利点を享受するには、これらのさまざまなファイルをインポートすることが、Webページの表示用にすべて機能するようにする必要があります。
HTMLへのインポート
HTMLで@importルールを使用するには、ドキュメントの
に次の行を追加します。：
<スタイル>
@import url（ "/ styles / default.css"）;
このコードは、このHTMLページで使用するためにこのスタイルシートをインポートし、その1つのファイル内のすべてのスタイルを管理することができます。 このように重要なスタイルシートの欠点は、この方法ではパラレルダウンロードができないことです。 ページは、このメソッドを使用して読み込んでいる他のCSSファイルを含め、ページの残りの部分に移動する前に、スタイルシート全体をダウンロードする必要があります。これは、ページの速度とダウンロードのパフォーマンスに悪影響を及ぼします。 今日のウェブサイトの成功にとって、ページパフォーマンスの重要性を考えると、この欠点だけが@importの使用を避けたい理由です。
代替アプローチ
HTMLで@importを使用する代わりに、次のようにそのCSSファイルにリンクすることができます：
これは@importと非常によく似た働きをしています。つまり、1つの中央の場所/ファイルからすべてのCSSを管理できますが、この方法はダウンロードの観点からは好ましい方法です。 異なる種類のスタイルを別々のファイルに分割したい場合は、引き続きそれを行い、マスターCSSファイル内で@import機能を使用することができます。 つまり、外部CSSファイルは個別に管理できますが、すべてが1つのマスターCSSにインポートされるため、パフォーマンスが向上します。
CSSへのインポート
上記のコードの例を使用すると、HTMLページで "default.css"ファイルを使用できます。 そのCSSファイルの中には、さまざまなページスタイルがあります。 その1つのページにすべてのスタイルを記述することができます。また、@importを使用して簡単に管理することもできます。 もう一度、レイアウト用、タイポグラフィ用、画像用の4つの別々のCSSファイルを使用しているとします。 4番目のファイルは、私たちのページがリンクしている "マスター"ファイルです（この例では、 "default.css"です）。 そのマスターCSSファイルの最上部に、以下に示すルールを追加することができます：
@import url（ '/ styles / layout.css'）;
@import url（ '/ styles / type.css'）;
@import url（ '/ styles / images.css'）;
これらのルールは、CSSファイル内の他のすべてのコンテンツよりも前になければならないことに注意してください。 これらのインポートルールの前に他のCSSスタイルを使用することはできません！
これらのインポートルールの下で、デフォルトシートに含める他のCSSスタイルを追加することができます。 そのメインのCSSファイルが読み込まれると、最初にこれらの別々のファイルを読み込んでスタイルをスタイルシートの最上部に追加します。 これらのインポートされたものの下にあなたの他のすべてのスタイルがあり、ウェブブラウザがあなたのサイトを表示するのに使う完全なCSSファイルを作成します。 そのHTMLにリンクされた単一のスタイルシートを持ちながら、小さくて集中したファイルを管理する利点があります。
メディアクエリに＆＃64;インポートを使用する
1つのことは、 レスポンシブウェブサイトスタイルの ウェブサイトのメディアクエリを別々のファイルに分割することです。 これらのレスポンシブなスタイルは、サイトの他のスタイルルールと一緒に見たときに混乱する可能性があるため、別のファイルで独自のスタイルを使用すると魅力的な場合があります。 このアプローチの1つの懸念は、あなたの@importルールが最初でなければならないということです。これは、あなたのサイトのスタイルの残りの部分より前にメディアクエリがロードされることを意味します。 パフォーマンスを考慮したモバイル対応のレスポンシブサイトを作成する場合、これが問題になる可能性があります。このため、サイトのレスポンシブスタイルを個別にセクション化せず、@importを使用してサイトに配置することをお勧めします。 はい、利点があるように見えるかもしれませんが、欠点はこれらの利点を上回ります。
インポートを使用する必要はありますか？
いいえ、あなたはしません。 多くのサイトでは、1つのファイル内にすべての主要なスタイルを表示するだけで、そのファイルが大きくてもそれが管理されます（これは私が自分の作品でやる方法です）。 @importが役に立つと分かったら、それはあなたのワークフローの一部である可能性があります。 それ以外の場合は、すべてのCSSルールの単一のスタイルシートをリンクするWebページを安全に作成することができます。
ブラウザのサポート
非常に古いブラウザでは、これらの@importルールのいくつかに問題がありますが、最近はこれらのブラウザが問題になることはまずありません。 これは特に、Internet Explorerの古いバージョンの期限が切れたためです。 最終的に、HTMLやCSSで@importルールを使用することに決めた場合、IEの古いバージョンを驚くほどサポートする必要がある場合を除き、従来のバージョンのWebブラウザでは問題に遭遇することはありません。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集。