CommentOut

【CSS設計】BEMで汚染が発生しにくい差分スタイル 【CSS設計】BEMで汚染が発生しにくい差分スタイル

【CSS設計】BEMで汚染が発生しにくい差分スタイル

公開日:  最終更新日:

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という考え方です。

宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。