
CSS は簡単に記述ができ、学習コストも低いのが大きなメリットです。しかしその反面、思い付くままにコーディングを進めていくと、いとも簡単に記述の論理的整合性は崩れます。そのため、以下のような「あるある」が良く起こりがちです。
破綻した CSS のあるある
- 可読性が悪く、クラス名の命名ルールを理解するだけで日が暮れる
- 変更したい箇所の記述が探せず、新たなクラスを適当に追記する
- CSS ファイル内に !important が散乱する
- 命名ルールがいい加減なので、CSS コードが整理できずに肥大化する
- 重複コードがたくさんあり、修正を何箇所にも反映するのが大変
このような破綻した状況に直面しないためには、次のような4つのポイントを念頭に置きながら CSS を構築していく必要があります。
生産性の高い CSS の4つの特徴
予測しやすい
ルールが期待通りであること、意図しないところへの影響を与えないこと
再利用しやすい
既存のパーツから新しいコンポーネントを速くつくれること
保守しやすい
追加・更新されるとき、既存のCSSのリファクタリングを必要としない
拡張しやすい
CSS設計の学習コストが低く、安易に管理できること
こうした生産性の高い CSS を構築するための設計思想の1つが、 BEM という方法論です。
ピクトグラム引用サイト: ヒューマンピクトグラム2.0
http://pictogram2.com/
http://pictogram2.com/