BEM という命名規則

0
2180
views

適切なスタイルガイドがあれば、開発、デバッグ、新機能の追加などの作業は大幅に効率化されます。だが残念なことに、ほとんどの CSS は、構造や命名規則がないまま開発されます。適切なスタイルガイドが不在となった CSS は、内包的に矛盾を抱え破綻し、長期的に見れば維持不能となります。

BEM のアプローチは、Webサイトの開発に参加するすべてのメンバが単一のコードベースで動作し、同じ言語を話すことを保証します。適切な命名法を使用することで、ウェブサイトのデザインの変更を準備します。

B ・ E ・ M があらわすもの

BEMはブロック(Block)、エレメント(Element)、モディファイア(Modifier)の頭文字をとったものです。

頭文字 英語表記 意味
B Block かたまり(役割)
E Element 構成要素
M Modifier 修飾子

class名の命名ルールとセパレータ

命名規則

  • 単語の間はハイフン1個(例: block-name)
  • Block と Element の区切りはアンダースコア2個(例: block-name__element)
  • Modifier はハイフン2個(--)の後に付加する(例: block-name__element--modifier)

このような例を見て分かるように、BEM ではクラス名の中に__と、アンダースコアを二重で使うのが特徴です。特徴的なアンスコ2個だけではなく、アンスコ1個やハイフンも単語の区切り記号として使用しており、BEMではこれをセパレータと呼んでいます。

BEMでは、誰が見てもわかるように、Block、Element、Modifierそれぞれの区切りに、ルールに従ったセパレータをクラス名上に配置していきます。このセパレータが BEM のキモとも言えます。

セパレーターの種類

ここでは、BEM開発者の記述方法に合わせたセパレーターを紹介していますが、次の3種類の区切りをきちんと区別でき、それが一貫していれば、セパレーターの種類は自由です。

  • BlockとElementとの区切り
  • Block(あるいはElement)とModifierとの区切りと、Modifierのkeyとvalueの区切り
  • BlockやElement名を、2つ以上の単語で表す場合の単語と単語との区切り

大切なのは、クラス名を見たときに、セパレーターの種類によって、それがBlockとElementの区切りなのか、Modifierの区切りなのか、それともただの単語の区切りなのかが、はっきり判別できるようにすることです。

BlockとElementの区切り

「Block__Element」と、区切り文字にアンダースコアを2つ繋げたものを使用します。

<ul class="menu">
  <li class="menu__item"></li>
  <li class="menu__item"></li>
</ul>

Modifierの区切りと、Modifierのkeyとvalueの区切り

「Block_key_value」または「Element_key_value」のように、区切り文字にアンダースコア1つを使用します。

<ul class="list  list_type_disc">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>

<ul class="menu">
  <li class="menu__item">
  <li class="menu__item  menu__item_state_current"></li>
  <li class="menu__item">
</ul>

単語の区切り

BlockやElement名を、2つ以上の単語で表す場合は「単語-単語」のように、区切り文字にハイフンを使用します。

<div class="search-result">
  <div class="search-result__item">...</div>
</div>

B ・ E ・ M の例

BEM あらわし方
Block サイト検索 .site-search
Element 入力欄 __field
Modifier フルサイズ --full-size
BEM あそこのアレ .site-search__field--full-size

BEMの概念

Blockはあるパーツ(コンポーネント)の親要素です。BlockはElementと呼ばれる子孫要素を持つことができます。Modifierはバリエーションや状態を変化させるときに指定するもので、BlockかElementと同階層に指定します。

Block と Element 、そして Modifier の関係性は次のように人や物になぞらえると容易に理解できるかと思います。

CSS 伝えたい意味
.person {…}
.person__hand {…} 人の手
.person--female {…} 女性
.person--female__hand {…} 女性の手
.person__hand--left {…} 人の左手

クラス名で伝える

BEMのポイントは、他の開発者にマークアップが名前だけから何をしているかを伝えることです。例えば次のように Block と Element を意識的に使い分けることで、明示的に意味を伝えます。

BEM表記のクラス名 伝えたい意味
widget-list ウィジェット一覧
widget__list ウィジェットの中にあるリスト

BEMが解決を目指すポイント

BEMという方法論は、次の3点の問題の解決を達成することを目的としています。

リリースをすばやく

BEM は CSS についてのコーディングルールを明確にする方法論です。開発にあたり、あらかじめルールを明確に規定しておくことで、個人個人が悩む時間やムダな試行錯誤や修正が少なくなり、その分開発スピードが上がります。

規模拡大を容易に

チームの規模拡大が容易であるためには、チームに入った新しいメンバーが、できるだけ短期間で即戦力になれる必要があります。チームに新しいメンバーが入っても、そのメンバーがBEMさえ理解していれば即戦力になります。また、時間がたってもチームが変わってもメンテナンス可能な状態を維持できるでしょう。BEMはチームの共通言語の役割をします。

コードの再利用性

コードの再利用性は、Webサイトを構成するパーツがどの程度、独立して設計されているかで決まります。パーツを完全に独立させることができれば、コードの再利用が容易になります。ここでの再利用とは、CSSによる見た目の話だけでなく、JavaScriptによる振る舞いも含んでいます。