BEM（Block, Element, Modifier） は、CSSクラスの命名規則・設計手法のひとつです。ロシアのIT企業 Yandex が考案し、CSSの構造を整理して再利用性や保守性を高めることを目的としています。
名前の由来
B (Block)独立して意味を持つ部品（コンポーネント）。例：header、menu、button など。
E (Element)Blockを構成する要素。Blockに依存して存在します。例：menu__item、button__icon など。
M (Modifier)BlockやElementの状態やバリエーションを表す修飾。例：button--large、menu__item--active など。
特徴とメリット
明確な構造クラス名だけで要素の役割が分かる。
CSSの衝突を防止セレクタをネストさせなくても、スコープが明確になる。
再利用しやすい他のページやコンポーネントに持ち込んでも意味が崩れにくい。
大規模開発に強いチーム開発でも「誰が書いたCSSか分からない問題」を回避できる。
デメリット
クラス名が長くなりがち例：header__nav__item--active
小規模サイトだと「やりすぎ」になる場合もある。
BEMの位置づけ
CSS設計の代表的な手法のひとつで、他にも
OOCSS（Object Oriented CSS）
SMACSS（Scalable and Modular Architecture for CSS）
ITCSS（Inverted Triangle CSS）
などと並んで、大規模サイトや長期運用プロジェクトでよく採用されています。
