BEMが破綻する理由

  • このエントリーをはてなブックマークに追加

CSS設計

ここ数年、CSSも設計の重要度が高まり、様々な設計手法が出てきています。 「OOCSS」「SMACSS」「BEM」などが代表的な手法で、これらの考え方をベースにした派生版も優秀なものが出てきていますよね。 弊社でも2016年は年間通してBEMを導入しておりました。 良い面も多いですが悪い面もあり、導入が失敗だったと感じたこともありましたが、いまは慣れたこともあり使用しています。 今回はBEMが破綻するケースを挙げてみたいと思います。 あくまでも慣れ、スタッフの認識度合いによりますので参考程度に読んでみてください。

BEMの記述法、概念

これが曖昧だとすぐに破綻します。 まずはこの辺の情報に目を通すことが重要ですね。

コードの見た目

やる気に関わります。 ただ、導入するなら諦めましょう。 そのうち慣れてなにも感じなくなります。

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

なんでこんなにclass付けないとダメなの?と考え始めるとアウトです。 私もルールと割り切ってclass割当しております。

スタッフの共通理解度

なんちゃってBEMが混ざってくるとすぐに破綻します。 ある程度きっちりと記述法を統一するべきですね。 例えば、単語の区切りに-エレメントに__モディファイアに--というルールの際に以下のような記述が出て来るなどなど。 例) .block_word__element-word--modifier {}

blockにする要素のスコープ

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

もちろんメリットも

あとで見てもわかりやすく、修正によって他に影響が出ない

書いたとおりです。 きちんと書かれたBEMは後でみても構造を理解するのが楽です。 そしてなんといっても導入して良かった一番のメリットはメンテナンス性です。 工期の長いプロジェクトや、規模の大きいサイトには適していると感じることが多いです。 数日前に作成したページ、または別のスタッフが作業したページでも修正して問題が出ることが少ないです。 ブロックで完結していることが大きいですね。

結局オススメなのか

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

SNSでもご購読できます。

コメントを残す

*