BEM
Block, Element, Modifier（ベム）
セレクターはクラスセレクターを使用し、 詳細度を均一に
クラス名は半角英数字の小文字
複数の単語はハイフン-でつなぐ
Block
論理的かつ機能的に独立したページモジュール
特定のコンテキストに依存していない、どこでも使い回せるパーツ
例：menu、global-nav
クラス名は見た目を表すのではなく、「それが何なのか」を表すようにする
NG：red-text
OK：error
Element
Blockを構成し、Blockの外では独立して使用できないもの
クラス名はBlockの名前__Elementの名前
例：menu__item、global-nav__link-item
ElementにElementをネストさせた命名はよくない
__は1回だけ
Elementは必ずBlockの中に配置する
Modifier
BlockもしくはElementの見た目や状態、振る舞いを定義するもの
Block、Elementに対するオプション要素（なくてもよい）
Modifierを単独で使用することはできない
クラス名は適用するBlockまたはElementの名前_Modifierの名前
例：menu__item_actived、global-nav__link-item_actived-and-focused
キーと値の組み合わせの場合はアンダースコア_で区切る
例：menu-item_text_large、global-nav__link-item_color-theme_caution
キーと値：textとlarge、color-themeとcaution
名前が長くなっても省略してはいけない
Modifierの名前は「それがどうであるか」を重視
見た目や状態、振る舞い
真偽値
disabled、focused、actived
キーと値のペア
text_large、size_s
名前から想像できないスタイルを当てない（責任範囲を絞る）
Mix
単一のDOMノードに、異なるBEMエンティティが複数付加されたインスタンス
ひとつのHTML要素に、役割の異なる複数のクラスがついている状態
MixかModifierどちらを使うか迷ったら
Mixを使う：position や margin など、レイアウトに絡む変更
Modifierを使う：レイアウトではなくそのBlock（またはElement）内で完結する変更
グループセレクターの代わりにMixを使う
そもそもグループセレクターは使わず、無理にMixも使わない
Mixを使うときは、MixをしたBlockのModifierで上書きする
BEMを成功させるコツ
DOMモデルではなく、Blockという単位をベースに考えましょう
IDセレクターと要素型セレクターは使用しないようにしましょう
子（孫）セレクターでネストされるセレクターの数は、なるべく少なくしましょう
名前の衝突を避けるために、またコードから情報が読み取れるように、命名規則にきちんと従ったクラス名を付けましょう
Blockなのか、Elementなのか、Modifierなのかを常に意識しましょう
BlockまたはElementで変更が頻繁に起こりそうなスタイルのプロパティは、Modifierに移しておきましょう
Mixを積極的に使用しましょう
管理性を高めるために、Blockはひとつひとつがなるべく小さくなるように分割しましょう
Blockを積極的に再利用しましょう
半田 惇志. CSS設計完全ガイド ～詳細解説＋実践的モジュール集 (Japanese Edition) (Kindle Locations 2530-2537). Kindle Edition.