フロント実装〜BEM〜
BEM
BEMとは、多くの開発者が取り入れているCSS設計。BEMは、厳格なクラスの命名規則が特徴。BEMはBlock、Element、Modifierの頭文字を取ったもので、ページを構成する要素をBlock、Element、Modifierのどれかに当てはめてクラスを命名する。
CSS設計
BEMを使用するメリット
BEMには以下のメリットがある。
- クラスの命名が簡単になる
- 要素の再利用がしやすくなる
クラスの命名が簡単になる
CSS設計において、命名規則が最も難しいとされている。
BEMでは、ページを構成する要素をBlock、Element、Modifierの3つに分類して考える。Block、Element、Modifierのみでクラスを命名することで、クラス名に悩むことがなくなる。
要素の再利用がしやすくなる
共通の要素を別の場所で再利用しようとしても、要素がHTMLに依存していると同じCSSを2つ書かなければならない。しかし、BEMを使用することで、クラスの命名がHTML構造に依存しなくなる。
HTML構造に依存しないことで、要素の再利用がしやすくなる。
BEMを使った命名
Block、Element、Modifierについて
BEMではページを構成する要素をBlock、Element、Modifierの3つに分類し、組み合わせることでクラスを命名する。Block、Element、Modifierの3つを使用して命名することで、クラス名だけでHTML要素の意味を伝えられる。
Block
Blockとは、ある要素の大元となるブロック要素。Blockの命名には名詞を使用する。以下で説明するElementやModifierは、このBlockを起点に命名される。
Element
Elementとは、Blockに属する子要素。1つ以上のElementによって、Blockは構成されている。Elementの命名には名詞を使用する。
Modifier
Modifierとは、Blockまたは、Elementに特別な修飾をする要素。Modifierの命名には形容詞を使用する。
それぞれの要素を表にまとめると以下のようになる。
| 要素 | 説明 |
|---|---|
| Block | Blockとは、ある要素の大元となるブロック要素。Blockの命名には名詞を使用する。ElementやModifierは、このBlockを起点に命名される。 |
| Element | Elementとは、Blockに属する子要素。1つ以上のElementにより、Blockは構成されている。Elementの命名には名詞を使用する。 |
| Modifier | Modifierとは、Blockまたは、Elementに特別な修飾をする要素。Modifierの命名には形容詞を使用する。 |
命名規則について
BEMの命名規則は以下の2つ。
- BlockとElementをつなぐ場合は、アンダースコア2つでつなぐ
- Modifierにつなぐ場合は、ハイフン2つでつなぐ
【例】 ヘッダーメニューを作る
sample.html
1 2 3 4 5 6 7 8 |
<nav class='HeaderNav'>
<ul class='Menu'>
<li class='Menu__list'>TOP</li>
<li class='Menu__list'>CONTACT</li>
<li class='Menu__list Menu__list--backBlack'>ABUOT US</li>
<li class='Menu__list'>SERVICE</li>
</ul>
</nav>
|
navはヘッダーのナビゲーションメニューなので、クラス名をHeaderNavとした。
このようにクラス名の単語数が2つ以上の場合はキャメルケースまたはスネークケースでつなぐ。
ulはheader-navの子要素だが他のヘッダーメニュー以外の部分でも使用したいので、クラス名をMenuとした。
liはMenuの子要素なので、クラス名をMenu__listとした。
liのうちABOUT USだけは背景色を黒くしたいので、クラス名をMenu__list--backBlackとした。
Modifierはこのように特定の部品を修飾したい時に使用する。
このhtmlに対して、以下のようにSassを記述した。
sample.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.Menu {
list-style: none;
&__list {
background-color: #3BD1EC;
color: #FFF;
float: left;
font-size: 30px;
padding: 2% 1%;
text-align: center;
width: 23%;
&--backBlack {
background-color: #000;
color: #3BD1EC;
}
}
}
|
以下のように、Modifierを使用した部分だけ背景色を黒くすることができた。
