BEMの使い方、ポイントの復習

CSSはサイトの長期運営・規模拡大に伴って複雑化し非常に壊れやすいものです。
壊れにくいCSSを作成するには、明確なルールが必要不可欠です。今回は、CSSの設計に有用な方法論であるBEMについて紹介するとともに、BEMを理解する上で抑えておきたいポイントをまとめました。

BEMとは

CSSの設計に使用される命名規則です。厳格なルールに則ってクラス名を付けることで、透明性が高く破綻しにくいCSSを作成することができます。

BEMを構成する3要素

BEMという名称はBlock、Element、Modifierという三つの構成要素の頭文字をとって名付けられたもので、それぞれが以下の役割を持ちます。

  • Block(ブロック) – ページのコンポーネント(構成要素)を表す
  • Element(エレメント) – Blockを構成・補助する要素を表す
  • Modifier(モディファイア) – 元となるBlockやElementの状態が変化したものを表す

BEM/MindBEMdingの記法

BEMとは上述のBlock、Element、Modifierを分けて考えるフロントエンドの命名手法であり、それをCSSでの使用するために改良したものがMindBEMdingという記法です。
現在では、CSSでBEMというとMindBEMdingのことを指すことが多いようです。

MindBEMdingでは、Elementをアンダースコア2つ、Modifierをハイフン2つで連結し、BEMの各要素を表します。

block
block__element
block__element--modifier
block--modifier
block--modifier__element
block--modifier__element--modifier

次に、BEMの各要素の特徴をみていきましょう。

Block(ブロック)

Blockは、ページを構成する一つ一つのコンポーネントです。
BEMでは、タイトルやリスト、その他様々なコンポーネントをBlockとして定義します。

再利用を前提とする

Blockの特徴として、再利用を前提として作成する点が挙げられます。
Blockは、ページ内で繰り返し使用したり、ページ内の別の箇所や別のページなどでも使用することができます。
つまり、Blockは単体で配置・動作が可能なものとして設計する必要があります。

Blockは入れ子にすることができる

また、Blockは入れ子にして使用することができます。
しかし、上述したように単体で配置・動作可能であるのがBlockの性質なので、親や子に依存しないよう作成する必要があります。
そのため、CSSではBlockを入れ子にしてスタイルを適用させることは必要最小限にとどめることが推奨されています。

参考:CSS / Methodology / BEM

Element(エレメント)

Elementは、Blockを構成したり、補助したりする要素です。

Elementのクラス名には、所属するBlock名を含める

Elementでスタイルを定義するとき、クラス名には必ずそのElementが所属するBlock名を含めます。
Elementは、特定のBlockの子孫要素として働きます。

block__element
block--modifier__element

Elementは所属するBlock内で繰り返し使用できる

Elementは、所属するBlock内で繰り返し使用できます。
以下にマークアップの例を示します。

<ul class="example-list">
	<li class="example-list__item">...</li>
	<li class="example-list__item">...</li>
	<li class="example-list__item">...</li>
</ul>

上記の例では、「.example-list」がBlock、「.example-list__item」がElementを示します。
なお、ハイフン一つは単語の区切りに用いられ、Block、Element、Modifierの区切りとは明確に区別されます。

Modifier(モディファイア)

Modeifierでは主に修飾に関する指定をします。

booleanまたはkey-valueの二種類がある

公式のクイックスタートガイド(Quick start / Methodology / BEM)によると、Modifierにはbooleanとkey-valueの2パターンがあります。

booleanのパターンは真偽値、つまりtrueかfalseかを示し、ボタンのオンオフなどに使用されることが想定されます。
key-valueのパターンでは名前と値、つまりkeyがvalueである状態を表します。
keyとvalueの区切りにはアンダースコア一つを使用します。

BlockのModifierとElementのModifier

Modifierには、Blockに対するModifierと、Elementに対するModifierがあります。

block--modifier
block__element--modifier

複数のModifierは同時に使用できる

BlockやElementに設定された複数の種類のModifierは、同時に使用することができます。

BEMの醜さと改善案

BEMの難点として、よくその醜さが挙げられます。
ハイフンやアンダースコアを二つ続けることの不快感や、ElementやModifierの記述の冗長さには不満を持たれる方がいるのも頷けます。
BEMの記述に関する改善案について、少しだけ取り上げます。

区切り文字を変える・キャメルケースを使う

セパレータ(区切り文字)にはハイフン二つやアンダースコア二つ以外を使用することもできます。
多くのブログサイトなどでは、改善案としてキャメルケース(ローワーキャメルケース)を用いることが提案されています。

例えば、以下のようなものです。

  • BlockとElementの区切りにはアンダースコア一つを使用
  • Modifierの区切りにはハイフン一つを使用
  • ModifierのkeyとValueの区切りにはキャメルケースを使用

上記のようにすると、記述を多少短縮することができます。

block__element--key_value //before

block_element-keyValue //after

しかし、本来のBEMの目的でもある「透明性を高め他の開発者でも理解しやすくする」という点では、後者は多少劣るかもしれません。
個人的には、ハイフン二つ、アンダースコア二つを用いたほうが見やすく一目で理解しやすい気がします。
この辺りについては、組織や個人によって、うまく調整して使用すると良さそうですね。

要素構造によっては省略する

BEMでは、それぞれの要素を独立させるために、CSSのセレクタにタグを用いてスタイルを指定することは禁止されています。
以下の記事の執筆者様は、それについて疑問を投げかけておられます(その他にも、BEMの記法について示唆に富む内容が書かれています)。
実践 めんどうくさくない BEM – ダーシマ・ヱンヂニヤリング

例えば、リストをマークアップする際に、ul以外を用いることが考えられないケースがあったとします。
その場合、ulの子要素として存在し得るのはliだけです。
このような要素構造に対しスタイルを指定するならば、セレクタにタグ名liを使用しても良いのではないでしょうか。

<!-- 通常のBEM -->
<style>
.example-list {...}
.example-list__item {...}
</style>
<ul class="example-list">
	<li class="example-list__item">...</li>
	<li class="example-list__item">...</li>
	<li class="example-list__item">...</li>
</ul>

<!-- CSSセレクタにタグ名を使用 -->
<style>
.example-list {...}
.example-list li {...}
</style>
<ul class="example-list">
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

例外を増やすことは破綻を引き起こす種にもなりえますが、BEMの厳格さを維持したまま、慎重に取り入れる分には良いように思います。

まとめ

重要なポイントをおさらい。

  • BEMには、Block・Element・Modifierがある
  • Blockはページの構成要素、ElementはBlockの構成要素、ModifierはBlockとElementの修飾
  • Elementの区切りにはアンダースコア二つ(__)、Modifierの区切りにはハイフン二つ(–)を使用する
  • 再利用できるように設計する

この記事では、個人的にポイントとして抑えたい部分をまとめました。
BEMの良いところは、わかりやすさ・覚えやすさ・破綻しにくさ、の三点だと思います。

BEMSass, CSS, BEM

Posted by WebMemo