CSS設計で念頭におくべき4つのポイント

0
410
views

CSS は簡単に記述ができ、学習コストも低いのが大きなメリットです。しかしその反面、思い付くままにコーディングを進めていくと、いとも簡単に記述の論理的整合性は崩れます。そのため、以下のような「あるある」が良く起こりがちです。

破綻した CSS のあるある

  • 可読性が悪く、クラス名の命名ルールを理解するだけで日が暮れる
  • 変更したい箇所の記述が探せず、新たなクラスを適当に追記する
  • CSS ファイル内に !important が散乱する
  • 命名ルールがいい加減なので、CSS コードが整理できずに肥大化する
  • 重複コードがたくさんあり、修正を何箇所にも反映するのが大変

このような破綻した状況に直面しないためには、次のような4つのポイントを念頭に置きながら CSS を構築していく必要があります。

生産性の高い CSS の4つの特徴

予測しやすい

ルールが期待通りであること、意図しないところへの影響を与えないこと

再利用しやすい

既存のパーツから新しいコンポーネントを速くつくれること

保守しやすい

追加・更新されるとき、既存のCSSのリファクタリングを必要としない

拡張しやすい

CSS設計の学習コストが低く、安易に管理できること

こうした生産性の高い CSS を構築するための設計思想の1つが、 BEM という方法論です。