@importは時代遅れだって?

Home / ウェブサイトについて / @importは時代遅れだって?

これまで様々なサイトに携わってきたが、CSSファイルの細分化には気を使ってきた。
なぜなら、圧倒的に管理が楽だからだ。

制作中もさることながら、再び改修する際も自分が見て分かるようにマークアップし、IDやクラスのネーミングも統一化させ自分の中で定義付けを行うことで、久しぶりに覗く自らが書いたコードにもすんなり順応できる。

@import

その際に多用してきたのが「@import」。
CSSを細分化し(要するにブロックごとに分けたり、用途によって分けたり…)読み込ませることで、加筆や削除を容易にさせておくことができる。全体的には変えないが、ちょっと大がかりに変えるなどという場合に、他の部分に影響なすることなくスムーズな改修ができる。

しかし、@importはレンダリングが遅いのも事実だ。おそらくPHPやCGIを使ったサイトだと軽く不愉快なほど遅く、昔のWordPressやXoopsではかなり体感できるほど読み込みスピードが遅い。

Object Oriented CSS

最近では「Object Oriented CSS」という手法が採用されているとのことだが、調べてみると既に自分も少し導入していた手法であった。
IDにスタイルを定義付ける手法が一般的だ。つまりロケーション(ヘッダやフッタ…)ごとにスタイルを作る。しかし、Object Oriented CSSとはサイト全体クラスを付けて、必要なプロパティを「パーツ」のように付けていく。
簡単に言うと、よく使うプロパティは色々なところで再利用できるということだ。サイト全体をObject Oriented CSSで作ったことはないが、パフォーマンスも向上するのだろうか?
初動制作時の工数はかかりそうだが、これも自分の中のスタンダードを徐々に構築しておくことで、再び改修する時に手間がかからなそうだ。

Object Oriented CSS