はじめに
CSSを読み込むときに、
<link rel="stylesheet" href="style.css">
と書いたり、
@import "style.css";
と書いてあるのを見たことはありませんか？
どちらも「CSSを読み込む」ためのコードですが、どのような違いがあるのでしょうか。
そこで本記事では、Webゲームなどを作る際に使用する@importや<link>の違いについてまとめました。
使用する中でどちらを使うべきか迷った方や、違いが気になった方の参考になれば幸いです。
<link>とは？
HTML側でCSSファイルを読み込む方法。
<head>
<link rel="stylesheet" href="style.css">
</head>
特徴
- HTMLファイルの
<head>部分に記述する - ページの読み込みと同時にCSSファイルが読み込まれる
- 現在のWeb開発では
@importよりも一般的
@importとは？
CSS側で別のCSSファイルを読み込む方法。
@import "style.css";
@import url("style.css");
特徴
- CSSファイルの中に書く
- CSSが読み込まれた「後」に、さらにCSSを読み込む
@importと<link>の違い
記述するのがHTMLファイルかCSSファイルか、という違いを除くと、以下のような違いがある。
@import：CSSの後に読み込まれる➡表示速度が遅くなりやすい
<link>：HTMLと同時に読み込まれる➡表示速度が速い
また、@importを使ってCSSの中に別のCSSを読み込むと、どこで何をしているのかわかりにくいという問題もある。
このような理由から、@importよりもHTMLファイルから<link>で読み込む方が主流となっている。
加えて、@importはCSSの先頭に書く必要があるなど、仕様上の制約がある点にも注意が必要。
@importを使う場面とは？
では、あえて@importを使用するのはどんな時だろうか。
それは、CSSファイルを分割して管理したいときである。
CSSファイルが複数ある場合、それらをすべてHTMLで直接読み込むと、構成変更の際にHTML側も修正が必要になることがある。
するとメンテナンス性が低下するため、@importで管理することがある。
ただそうはいっても、現在は
- ビルドツール（Vite / Parcel / Webpack）
- Sass / PostCSS
などを使って最終的に1つのCSSファイルにまとめるのが主流である。
さいごに
今回の記事では、Web系で使うCSSの@importとHTMLの<link>の違いについてまとめました。
気になったときにぜひ参考にしてください。