CSSの@importのデメリットは？デメリットを理解して適切に使おう

CSSで外部のCSSファイルを読み込む際には@importを用います。

CSSファイルを適宜分割できるため保守性等で高いメリットがありますが、その分デメリットがあるという話もよく聞くのではないでしょうか？

今回は@importを使うことで起きるサイトの不具合やデメリットを解説します。

メリット・デメリット両方を理解し適切に使いこなせるようになりましょう。

headタグの中でlinkタグを用いて記述する場合、CSSファイルを並列的に読み込みます。

同時に複数のファイルを読み込むためサイトの表示スピードは速いです。

しかし、@importを使いCSSファイルをまとめると、それらが順番に処理されてしまうためファイルの数分、サイトの表示速度が遅くなってしまいます。

@importは基本的に上から順番に読み込まれます。

しかし稀にその順序が入れ替わってしまうことがあります。

もし万が一、普通のスタイルのあとからreset.cssが読み込まれてしまった場合はスタイルが全て崩れてしまいます。

冒頭で@importには高い保守性があることがメリットと述べました。

しかし、そのようにファイル分割をしたいのならば、Sassで書くことでそれらは解決できます。

Sassならファイルを分割できるのはもちろん、ネストなどを用いれるので、より便利に記述できます。Sassとは何か、書き方を学習したい方はぜひ下記よりQumeru[クメル]のSassカリキュラムを学習してみて下さい。

ここまで解説してきましたが、デメリットよりもメリットが大きくなる場面はあまりないことを理解して頂けたかと思います。

優先順位をつけるとしたら、CSSのみ、かつ高い保守性もこだわりたいのであれば使ってみてもいいでしょう。