BEMの考え方や命名規則などを調べてみたのでメモしておきます。
BEMについて
BEMはBlock、Element、Modifierの頭文字を繋げたもので、CSSの開発手法の1つです。
要素をBlock(親要素)、Element(子孫要素)、Modifier(派生)の3つに分類して考えます。
BEMのメリット
BEMを使うことのメリットとして、以下のような点が考えられます。
- コードの再利用を行いやすい
- 作業スピードの向上
- チームで開発する場合に認識を共有しやすい
パーツのコンポーネント化ができるため、他のページでパーツを流用するなどのコードの再利用を行いやすくなります。
作業スピードに関しては、命名規則がルールとして決まっているため、制作者が命名規則などで悩む時間を減らすことができます。
最初にBEMの使い方を覚えるコストがかかりますが、1回覚えてしまえば様々な案件で使用できます。
複数人で作業を行う場合でも、命名規則が統一されるため、他の制作者のコードの理解がしやすくなります。
また、制作途中でメンバーが追加された場合でも、ルールが統一されていることですぐに作業にとりかかることができます。
BEMの使い方
サンプルとして、簡単なボタンを作成してみます。
HTML
<div class="button"> <a href="" class="button__link">通常のボタン</a> </div> <div class="button button_wide"> <a href="" class="button__link">サイズの大きいボタン</a> </div> <div class="button"> <a href="" class="button__link button__link_primary">色違いのボタン</a> </div>
CSS
.button {
width: 180px;
display: inline-block;
margin: 5px;
text-align: center;
}
.button__link {
display: block;
border-radius: 5px;
padding: 10px;
color: #ffffff;
text-decoration: none;
background: #333333;
}
.button_wide {
width: 300px;
}
.button__link_primary {
background: #3498DB;
}
3種類のボタンを作成しました。
BEMの命名規則のデモページ
このサンプルでは以下の4つのclassが使用されています。
- .button
- .button__link
- .button_wide
- .button__link_primary
Block
Blockはページ内で使用するパーツ(コンポーネント)の親要素で、サンプルの.buttonが該当します。
ElementやModifierはこのBlockを基点にして作成されます。
Element
ElementはBlockを構成する要素で、サンプルの.button__linkが該当します。
Blockを構成する要素とわかるように、.Block__Elementのようにアンダーバー2つ(__)で繋ぐ命名規則になります。
Modifier
ModifierはBlockやElementのバリエーション違いの要素で、サンプルの.button_wideと.button__link_primaryが該当します。
Blockのバリエーション違いの場合は.Block_Modifier、Elementのバリエーション違いの場合は.Block__Element_Modifierのようにアンダーバー1つで繋ぐ命名規則になります。
MindBEMding
MindBEMdingはBEMから派生した命名規則です。
日本語の翻訳版はこちら
MindBEMdingの場合、以下のようにElementをアンダーバー2つ(__)で繋ぎ、Modifierをハイフン2つ(–)で繋ぐようにします。
.block {}
.block__element {}
.block--modifier {}
アンダースコアとハイフンを2つ使う理由は、ブロックをハイフンで区切るようにするためです。
.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */
最初のサンプルをMindBEMdingで記述する場合、以下のようになります。
HTML
<div class="button"> <a href="" class="button__link">通常のボタン</a> </div> <div class="button button--wide"> <a href="" class="button__link">サイズの大きいボタン</a> </div> <div class="button"> <a href="" class="button__link button__link--primary">色違いのボタン</a> </div>
CSS
.button {
width: 180px;
display: inline-block;
margin: 5px;
text-align: center;
}
.button__link {
display: block;
border-radius: 5px;
padding: 10px;
color: #ffffff;
text-decoration: none;
background: #333333;
}
.button--wide {
width: 300px;
}
.button__link--primary {
background: #3498DB;
}
【参考サイト】
- BEMによるフロントエンドの設計 – 基本概念とルール | CodeGrid
- MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
- bem-methodology-ja/definitions.md at master · juno/bem-methodology-ja · GitHub
- Summary of http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ エッセンスだけ訳。翻訳の正しさは微妙。 · GitHub
- ツクメモ的、CSSの命名規則、BEM（ベム）の使い方決定版！ | ツクメモ – ウェブやアプリをツクるヒトのメモ
コメントが承認されるまで時間がかかります。