インポートしたい（@import）

/* style.css の先頭 */
@import url("reset.css");
@import url("base.css");
@import url("components.css");

@importルールで、CSSファイルの中から別のCSSファイルを読み込めます。

1つのCSSを機能ごとに分割して管理したいときに使います。 @importはCSSファイルのいちばん先頭（@charsetの直後）に書く必要があり、 途中や末尾に書くと無視されます。

条件をつけて読み込みたい

@import url("print.css") print;
@import url("wide.css") (min-width: 1024px);

@importのあとにメディアクエリを書くと、その条件のときだけファイルを読み込みます。

• print … 印刷時だけ

• (min-width: 1024px) … 画面幅が1024px以上のときだけ

レイヤーに入れて読み込みたい（layer）

@import url("reset.css") layer(reset);
@import url("theme.css") layer(theme);

layer()を付けると、読み込んだCSSをカスケードレイヤー（@layer）に入れられます。

フレームワークのCSSを低い優先度のレイヤーに入れておけば、 自分のCSSで詳細度を気にせず上書きできます。

参考

• レイヤーしたい（@layer）

<link> との違い

<!-- HTML で読み込む -->
<link rel="stylesheet" href="style.css">

外部CSSの読み込みは、HTMLの<link>タグでもできます。

@importはCSSを1つずつ順番に読み込むため、ファイル数が多いと表示が遅くなりがちです。 本番のサイトでは<link>で読み込むか、ビルドツールで1ファイルにまとめることが多く、 @importは開発中の分割管理に向いています。

リファレンス

• @import

• @layer

• link