BEMのmodifireとSassの綺麗な書き方

BEMを使う場合、modifireを使って色違いの見出しを作ったりすると思いますが、あまり綺麗ではない書き方をたまに見かけるので、綺麗な書き方をこの記事で紹介したいと思います。

そもそもBEMとは何かをご存知では無い方は、こちらのサイトで詳しく紹介されているのでぜひご覧下さい。

綺麗ではない記述例

その１

タイトルの文字色を「赤」、「青」、「黄」にしたい場合

<div>
	<h2 class="ttl ttl--red">headTtl-red</h2>
</div>
<div>
	<h2 class="ttl ttl--blue">headTtl-blue</h2>
</div>
<div>
	<h2 class="ttl ttl--yellow">headTtl-yellow</h2>
</div>

.ttl{
	font-size: 16px;
	font-weight: bold;
	&--red{
		color: red;
	}
	&--blue{
		color: blue;
	}
	&--yellow{
		color: yellow;
	}
}

この問題点は、クラスを付ける際にマルチクラスにしていることです。上記サンプルのようにクラス名が短い場合は可読性もあまり悪くありませんが、実際はもっと長くなる場合が多いかと思います。出来るだけ見やすくするために、そして無駄な記述を減らすためにも上記のようなマルチクラスは避けたいです。

その２

タイトルの文字色を「通常の色」、「赤」、「青」にしたい場合

<div>
	<h2 class="ttl">headTtl-normal</h2>
</div>
<div>
	<h2 class="ttl--red">headTtl-red</h2>
</div>
<div>
	<h2 class="ttl--blue">headTtl-blue</h2>
</div>

.ttl{
	color: #333;
	font-size: 16px;
	font-weight: bold;
	&--red{
		color: red;
		font-size: 16px;
		font-weight: bold;
	}
	&--blue{
		color: blue;
		font-size: 16px;
		font-weight: bold;
	}
}

この問題点は、スタイルの共通箇所があるにも関わらず、何回も同じスタイルを記述していることです。上記サンプルの場合は、font-sizeとfont-weightだけですが、これよりプロパティが増えたら色の数だけ新しいプロパティを記述しなければいけません。とても手間ですし、なによりミスをする原因になってしまいます。

綺麗な記述例

タイトルの文字色を「通常の色」、「赤」、「青」、「黄」にしたい場合

<div>
	<h2 class="ttl">headTtl-normal</h2>
</div>
<div>
	<h2 class="ttl--red">headTtl-red</h2>
</div>
<div>
	<h2 class="ttl--blue">headTtl-blue</h2>
</div>
<div>
	<h2 class="ttl--yellow">headTtl-yellow</h2>
</div>

.ttl{
	$this: &;
	color: #333;
	font-size: 16px;
	font-weight: bold;
	&--red{
		color: red;
		@extend #{$this};
	}
	&--blue{
		color: blue;
		@extend #{$this};
	}
	&--yellow{
		color: yellow;
		@extend #{$this};
	}
}

上記のように、通常の要素はblock、バリエーションがある要素はblock--modifireで命名します。$thisには&を、つまり.ttlが格納されています。その変数の値とextendを使ってスタイルの共通箇所を設定します。このように記述することで、無駄の無い記述になり、コンパイルされるcssの記述量も以下のように少なくなります。

.ttl, .ttl--red, .ttl--blue, .ttl--yellow {
	color: #333;
	font-size: 16px;
	font-weight: bold;
}
.ttl--red {
	color: red;
}
.ttl--blue {
	color: blue;
}
.ttl--yellow {
	color: yellow;
}

まとめ

正しく綺麗にクラス名を命名したりスタイルを記述することで、コードの可読性が格段に上がると共に無駄な記述が少なくなります。

さらに、修正する際にも必要最低限の箇所の修正で済むのでミス防止にも繋がります。

BEMに限った話ではありませんが、コーディングをする際には「今」のことだけを考えず、「先（運用時やリリース後の修正、他の人が触るなど）」のことも考えてコーディングをしましょう。