「CSS」の「@import」は非推奨でも廃止でもありません
(公開日:)
CSSの「@import」について検索して心配になったので調べた結果です。
「CSS」の「@import」は使って問題ないです。
「@import」はCSS内で外部CSSをインポートできる
@import "base.css";
@import "part.css";
例えばこれをstyle.cssに記述した場合、上記2つのCSSをインポートできます。
文字コードの指定を除いては、一番最初に書かないといけないので、CSS指定の順番は自由にできないことには注意して下さい。
例えばCSSでずっと使う部分と頻繁に入れ替えたい部分があるとかした場合、HTMLのlinkタグを気にせずに一括でファイルの追加削除ができるわけです。
「@import」は処理速度の関係で乱用していいものではない
「@import」は便利ですが、あまり好まれてはいないようです。
というのも、読み込みが順番になるため、linkタグで並列に読み込むより時間がかかるという話があるのです。
- base.css→→→part.css→→→style.css→→→
- base.css→→→
- part.css→→→
- style.css→→→
- part.css→→→
みたいな差があります。
現代のネット速度であれば、大規模でなければ気になる差ではありません。
ただ、CMS等を使いHTMLの方で処理できるなら、そうした方がいいものではあります。
「@import」は仕様的に非推奨や廃止にはなっていない
少なくともビジネス用途では使われていない技術であることから、「@import」に関する情報はネット上に多くないようです。
しかも、システム上の問題が絡むSass(CSSと似た記法からCSSを吐き出す技術)と情報が混同されやすく、そちらでは非推奨になっているらしいので、注意して見ないとGoogleの検索結果からでは非推奨であると疑いを持ってしまいます。
私も一瞬疑った上で、できる限りの一次情報を確認してみました。
例えばMozillaの運営しているMDNのリファレンス。
https://developer.mozilla.org/ja/docs/Web/CSS/@import
念のため英語ページの方も確認しましたが、特に非推奨とも廃止とも記述がありませんでした。
更にそこから行けるW3の仕様書。
https://w3c.github.io/csswg-drafts/css-cascade-5/#at-import
こまかくルールは書いてありますが、非推奨とも廃止とも記述がありませんでした。
これらの記述から、Sassでなく「CSS」の「@import」は問題なく使用していいと言えます。
ちなみにSassの公式サイトは見方がわからなかったので確認できていませんが、blogに非推奨っぽい書き方をしている記事がありました。