吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

これが僕のBEMです。

2016年11月23日 / category : その他-lab

知り合いの方に「ブログを更新します」と宣言をしてしまったので、更新します。
JSの開発をメインにやっていると、マークアップの流行りというものをなかなか知る機会がなく、最近ようやくBEMというCSS設計の考え方を知りました。
そして、実務でも何案件か試してみて、BEMを理解したつもりです。そして、自分なりのBEMの解釈をここにまとめておこうと思います。

まず、BEMについての説明は割愛します。
これを話し出すと長くなりますので・・・。
「BEMってなんだ?」という方は、「BEM CSS設計」で検索していただければ、素晴らしい記事がいくつか出てきます。

ということで、BEMの知識があるという前提で、書き続けます。

BEMとは、CSS設計の考え方であって、個々の解釈で設計方法が変わってきますので、明確に何が正しくて、何が間違っているのか、という判断は難しいところであります。(ただし、ルールはありますので、ルール違反はダメです。)

ですので、誰かのBEMのCSS設計を見て、自分と考え方が違った場合も、あまり強く攻撃的に否定してはいけないです。

まず、BEMについての記事をいくつか拝見すると、

BEMは、シングルクラス設計だ
BEMは、マルチクラス設計だ
BEMは、大規模案件向きだ
BEMは、小規模案件向きだ

などなど、それぞれ意見が分かれているようでした。
これは、興味深い。
ということで、いくつか実務でBEMを試してみて、自分の意見は、

BEMを、マルチクラス設計することで、大規模・小規模どちらでも問題ない、という答えを出しました。

BEMを取り入れる前は、マルチクラス設計で、大規模案件をマークアップしていました。
で、シングルクラスのBEMで試してみると、やはり無理が出てくる。
とりあえず、大規模案件でシングルクラス設計は無理だ。
大規模案件は、マルチクラス設計でやろう。でも、BEMは、基本的にシングルクラス設計だ。
いやいや、BEMをマルチクラス設計にしよう。

という感じです。

では、具体的に1番気になったケースをコードを交えて、まとめてみる。
BEMを試してみて1番気になったケースは、

同じ装飾のElementなのに、BlockAが違う。

この場合、HTMLのマークアップ、CSS(SCSS)の設計はどうなるでしょうか。

例えば、次のようなマークアップがあるとする

xxxx.html
<section class="blockA">
<h2 class="blockA__title"><img src="xxxx" class="blockA__title-pic"></h2>
</section>

<section class="blockB">
<h2 class="blockB__title"><img src="xxxx" class="blockB__title-pic"></h2>
</section>

ここで、例えば、ElementであるblockA__titleblockB__titleのh2要素のデザイン上の装飾が同じ場合、SCSSの記述はどうなるでしょうか。

xxxx.scss
blockA{
	&__title{
		display: block;
		color: #f00;
		font-size: 16px;
		font-weight: bold;
		text-decoration: none;
	}
}
blockB{
	&__title{
		display: block;
		color: #f00;
		font-size: 16px;
		font-weight: bold;
		text-decoration: none;
	}
}

こう記述してしまうと、違和感あります。
ここで「BEMはシングルクラス設計だ」と言ってしまえば、終わってしまいますが、「BEMってマルチクラス設計でもよくない?」と考えれば、次のようにマークアップを変えて、

xxxx.html
<section class="blockA">
<h2 class="blockA__title __title"><img src="xxxx" class="blockA__title-pic"></h2>
</section>

<section class="blockB">
<h2 class="blockB__title __title"><img src="xxxx" class="blockB__title-pic"></h2>
</section>

SCSSを次のように記述します。

xxxx.scss
.__title{
	display: block;
	color: #f00;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}

blockA{
	&__title{
		width: 100px;
		height: 100px;
	}
}

blockB{
	&__title{
		width: 50px;
		height: 50px;
	}
}

こういう考え方でどうでしょうか。
__titleクラスを自分はモジュールクラス的な考えで、クラス名を「__」から始めるというルールを決めることで、視覚的にもわかりやすいかと思うんです。
このモジュールクラスを追加することで、BEMがマルチクラス設計になります。
この考えでいけば、大規模案件も問題なく対応できます。

これが僕のBEMです!

※Twitterでは、違うことをつぶやいていますが、、、、こっちが今の僕の考えです。。。