BEMが破綻する理由 │ 株式会社12Grid

Pocket

ここ数年、CSSも設計の重要度が高まり、様々な設計手法が出てきています。
「OOCSS」「SMACSS」「BEM」などが代表的な手法で、これらの考え方をベースにした派生版も優秀なものが出てきていますよね。

弊社ではBEMをベースにFLOCSS等を交えたCSSガイドラインを使用しています。
良い面も多いですが悪い面もあり、導入が失敗だったと感じたこともありましたが、いまは慣れたこともあり使用しています。

今回はBEMが破綻するケースを挙げてみたいと思います。
あくまでも慣れ、スタッフの認識度合いによりますので参考程度に読んでみてください。

1. デメリット
2. メリット
- 2.1. 1. 命名規則が厳格なので分かりやすい
- 2.2. 2. 修正時に思わぬ影響が出にくい
3. 結局オススメなのか

デメリット

1. BEMの記述法、概念

ここが曖昧なままだとCSSの設計はすぐに破綻します。
まずは以下のような情報に目を通すことが重要ですね。

2. コードの見た目

これまでCSS設計等を行ってこなかった人はここでやる気がなくなるかもしれません。というのも、厳格な命名規則に従って運用する上にクラス名が長くなりがちだからです。
ただし、BEMを導入するのであれば諦めが必要です。
そのうち慣れてなにも感じなくなります。

3. 長いクラスをタイプすることによる時間的ロス

前述したようにBEMはクラス名が長くなりがちです。_
なんでこんなにclass付けないとダメなの？と考え始めるとアウトです。
私もルールと割り切ってclass割当しております。

4. スタッフの共通理解度

BEMに限らずCSS設計を行い統一を図る際の最大の敵が共通理解度です。なんちゃってBEMが混ざってくるとすぐに破綻します。ある程度きっちりと記述法を統一するべきですね。
例えば、単語の区切りに-エレメントに__モディファイアに–というルールの際に以下のような記述が出て来るなどなど。

例）.block_word__element-word--modifier {}

5. blockにする要素のスコープ

コンテンツの最上位にあるsectionなどをblockにすると、ネーミングで困ったりします。
あくまでも部品単位でblockにしておかないと修正も大変大変。。。

メリット

1. 命名規則が厳格なので分かりやすい

決められた命名規則に従って書かれたコードは非常に読みやすいです。
つまり、時間が経過してから見直しても意味が分からなくなることが少ないうえ、途中でアサインされたメンバーも都度誰かに確認する作業が必要なくなるということです。
工期の長いプロジェクトや規模の大きいサイトなど、複数人で作業を行う環境に非常に適しています。

2. 修正時に思わぬ影響が出にくい

BEMの最大のメリットはメンテナンス性です。
BEMはHTML構造を明確にすることに軸を置いていますので、該当箇所の修正が他所に影響を及ぼしません。
これで作業中に修正指示が飛び交っても取り乱さずに済みそうです。

結局オススメなのか

小規模なサイトやスピード重視なものには非効率的な部分が目立ってしまうかもしれません。
こちらにはBEMよりもOOCSSのほうがオススメです。
ただし統一して使いつづけることによりスピードもあがるので、弊社では全てBEMで統一しておりました。
ネーミングの規則だけBEMを拝借して、他の設計取り入れたり、独自で設計するとかも出来ると思います。

Pocket