CSSを触っていると「このスタイルの色違いが欲しいな」とか「同じ色で角丸になれば良いのに」って思うことありますよね？
そういう時、安易に色名だけのクラスを作りがちですが、そういう単純な名前だと他のクラスと名前がかぶってしまうことがあるんですよね。
しかも、複数人で編集している時はなおさらです。

CSSの汚染発生例

でも、例えば以下の実装をした時は容易にCSSの汚染（意図していない場所のスタイルに影響を与えること）が発生します。

See the Pen CSS汚染01 by Uilou (@uilou754) on CodePen.

上記例では、メッセージエリアを定義する「.msg__bg」があり、背景の色違いパターンを作りたいと考えたため、「.msg__bg.red」を作りました。
そうすると、別の所で作っていた文字を赤くするスタイル「.red」と被ってしまい、背景だけでなく文字まで赤くなってしまいました。
これがCSSの汚染です。
CSSは誰でも触りやすい分、構造が単純であるが故に汚染が発生しやすいため、初めにしっかりと設計しておく必要があります。

BEMによるCSS汚染の改善例

そして、以下が改善案です。

See the Pen CSS汚染（改善） by Uilou (@uilou754) on CodePen.

「.msg__bg」の状態を表すクラスとして、「.msg__bg–red」を定義しています。名前は長くなりますが、汚染される確率はかなり減ります。
CSSでは指定を細かくしていくことを「詳細度」と表したりしますが、こちらも同じように名前を「.msg__bg」の状態が「red」だから「.msg__bg–red」という名前で詳細度を深くしたと考えることが出来ます。
さらに、SCSSを活用すると、より簡単に書けます。

See the Pen CSS汚染（SCSS） by Uilou (@uilou754) on CodePen.

SCSSでは、わざわざ「.msg__bg–red」と書き直す必要はなく、「&–red」と書くだけで、「親要素につなげて」という意味になります。
また、インデントで構造が把握しやすくなるので、非常にオススメです。

CSS設計BEMとは

上記のBEMは、言語やツールではなく、『CSSの設計手法』です。
CSSのクラス名は自由に命名出来るので、プロジェクトの規模が大きくなってくると名前が被ってしまい、知らず知らずのうちにデザインが崩れているなんてことにもなりかねません。
なので、綺麗に作ることはもちろんですが、大前提として汚染が発生しにくい作り方をしていなければいけません。
そこで、名前が被らないようにルール付けされたのが、BEMです。
BEMはそれぞれ構成要素の頭文字をとったもので
【B】Block
【E】Element
【M】Modifier
の略です。
Blockが要素の塊、ElementがBlockの部品名、Modifierが状態だと思ってます。（それが正しいかどうかは知らない）
なので、スタッフ紹介を作るなら、1名分の紹介エリアがBlock、写真や名前、所属などがElement、所属ごとに背景色を変えるならそれがModifierという考え方です。