CSS 設計の本を読んだので、自分用の備忘録を残しておく。
ついでに誰かのお役に立てれば幸いです。
BEM とは何ぞや
コンポーネントベースで Web ページを設計する方法論の一つ。
以下の単語の頭文字を取って「BEM」と呼称する。
Block
A logically and functionally independent page component.
訳すならば「論理的または機能的に独立しているページ構成要素」といったところか。
要するに「画面に並べる HTML 要素群を 都合の良い単位 に区切ってブロックとして考えよ」という話である。
命名規則
一つのブロックとして扱う要素群の 一番外側の要素 へブロックの名称を表す class 属性値を付与する。
やってはいけないこと
ブロックのクラス名には _ を使用しないこと。
_ は後述する BEM の命名規則において特別な意味を持つ予約文字である。
より詳しく知りたい人
quick-start を参照。
Element
A composite part of block that can't be used separately from it.
「ブロックから切り離して使用することのできない部品群」。
要するに ブロックを構成する HTML 要素群一つ一つ のことを指す。
命名規則
ブロックそのものだけではなく、それを構成する個々の要素にも class 属性値を付与する。
個々の要素のクラス名は ブロック名__要素名 の命名規則を使用して名前を付ける。
やってはいけないこと
ブロック名__要素名__要素名 と名前を付けないこと。
細かくなり過ぎて後々メンテが大変になる為、御法度とされている。
より詳しく知りたい人
quick-start を参照。
Modifier
ブロックや個々の要素のバリエーションを作ったり
状態を表現する時に使用する。
命名規則
class 属性値は ブロック名__状態名__値 の命名規則を使用して名前を付ける。
やってはいけないこと
便利だからと言って、たくさん作り過ぎないこと。
数が多過ぎると把握できなくなり、後で管理ができなくなる。
より詳しく知りたい人
quick-start を参照。
BEM の利点
- 命名規則にそって class 属性値を付与することでクラス名の重複が無くなり、 CSS スタイルの衝突を防ぐことができる。
- CSS セレクタが単純になり、保守性が高まる。
- HTML に目を通すことで、設計者が考えているページ構造を理解することができる。