BEMのデメリットを軽減するための応用手法

Sassを活用してModifierはシングルクラスにする

特にModifierを利用する際に生じる、HTMLの冗長性の問題は、Sassを活用して重複する部分を一元管理し、HTML側は常にclassを1つだけ指定するシングルクラスに保つことである程度解消することが可能。
生のCSSで運用されることが前提となっている案件でBEMを採用する場合は、Modifierに対して共通部分をグループセレクタで切り出してまとめておく作業を手動で行う必要がある。
Modifierによる冗長性の問題についてはこの対応である程度解決できるが、Modifierを複数掛け合わせて使用したい場合には組み合わせの数だけ差分スタイルを書かなければならず、CSS側の指定が煩雑になるため、どちらが良いとは一概には言えない難しさがある。

<div class="results">
　<div class="results-pickup">
　　<div class="results-pickup__comment--parimary">～</div>
　　<div class="results-pickup__comment--secondary">～</div>
　</div>
</div>
%results-pickup__comment {
　//コメント本来の共通スタイル指定
}
.results-pickup__comment {
　@extend %results-pickup__comment; //共通指定を挿入
}
.results-pickup__comment--primary {
　@extend %results-pickup__comment; //共通指定を挿入
　//優先順位高の差分スタイル指定
}
.results-pickup__comment--secondary {
　@extend %results-pickup__comment; //共通指定を挿入
　//優先順位低の差分スタイル指定
}

.results-pickup__comment,
.results-pickup__comment--primary,
.results-pickup__comment--secondary {
　//コメント本来の共通スタイル指定
}
.results-pickup__comment--primary {
　//優先順位高の差分スタイル指定
}
.results-pickup__comment--secondary {
　//優先順位低の差分スタイル指定
}

Modifierだけ単体class運用とする

BEMでよく見られるアレンジは、Modifierに該当するバリエーション名や状態変化のステータスについては単体classで運用するというものである。
基本的概念構造はBEMを踏襲しつつ、ModifierだけはBEMの命名規則を運用せず短い単体のclassを掛け合わせることでHTML・CSS双方の記述を省力化し、運用時の柔軟性を高めるメリットを享受できるため、このような運用は現場においてよく見られる。この手法のポイントは、以下の2点。

  • Modifier用の単体classには必ずそれと分かる特定の記号を付ける
  • Modifier用の単体classは必ずそれを適用する本体のclassとの結合classとしてスタイルを指定し、それ単体で機能するようにはしない

ただし、1つの要素に複数のBlock・Element名が指定されている場合、そのModifierがどこにかかるのか分かりづらくなるという問題もある。

<div class="results-pickup__comment _parimary">～</div>
<div class="results-pickup__comment _secondary">～</div>
.results-pickup__comment {
　//コメント本体の共通スタイル指定
　＆._primary {
　　//優先順位高の差分スタイル指定
　}
　＆.secondary {
　　//優先順位低の差分スタイル指定
　}
}

BEMにもカテゴリの概念を導入する

BEMはBlockの使われ方を明示する仕組みはないため、基本的につけられたBlockの名前から使われ方を推測する形となる。ただ、Blockの数が膨大になってくると、名前だけで管理するよりカテゴリ別に分類して整理したほうが分かりやすいと感じる場合も多いと思われる。
そうしたカテゴリ分類を分かりやすくするために有効なのが、名前の冒頭に「接続辞」を付ける方法である。例えば基本レイアウト構造用のBlockは「l-」で始まるようにするというように、分類したカテゴリごとに接続辞を変えておくことで命名規則から「使われ方」も判断できるようになる。
ただし、Block同士を分類する場合、今度は「どのように分類するべきか？」を考える必要が出てくる。これは単なるアレンジというよりCSSの設計思想そのものでもあるため、その場合はBEM的な考え方をベースにしながらコンポーネントを分類管理しやすく発展させた「FLOCSS」など別のCSS設計手法を検討したほうが良いかもしれない。

inserted by FC2 system