BEMを使う理由
再利用性があり、命名規則のおかげで考える手間を減らせて、見た目の分かりやすさがある為
Block
これはWebページを形作るパーツの一つ一つ。例、アカウント作成フォーム
Element
Blockを形作るパーツの一つ一つ。例、アカウント作成フォームの入力欄と作成ボタン
Modifier
同じBlockがある時に片方を違う表現にしたい場合に使われる。Elementも同様
例、Aリスト、Bリストがある時にBリストはチェックボックスにする。
ヘッダーの中に同じコンテンツがある中で一つだけ色を変えたい時。
ざっくりイメージ
BlockとElementは常に一緒
分解できるならBlock、できないならElement
Modifierは連続したものの中で一部を修飾したいとき。