html/cssコーダーにおける「あるある」を最初に書いてみましたが、皆さんの会社は、「class名」に関して問題を抱えていませんか？

基本的な問題は、まず「命名規則」を作って統一することで解決しますが、そんな命名規則の中でも「BEM式」が特にオススメという話をします。

前提：class名は統一した方が良い

webサイトは、基本的には「作っておしまい！」では無いし、自分以外の誰かが更新することを考えると、分かりやすい作りにしておく必要があります。

特に、仕様上どんな名前でも付けられるclass名は、一人ひとりの感性によって違う名前が付けられがち。
例えば、ボタン要素に対して「～button」と付ける人もいれば、「～btn」と略語で書く人もいます。

そういったclass名の混在を防ぐ為にも、class名は統一すべきだと考えています。

例えば弊社の場合・・・

というルールがあります。

「BEM式」について

まず「BEM式」について軽く説明します。

BEMとは、親要素のclass名を全て継承していく命名規則です。

▼例

	
		<div class="company-section">
			<div class="company-section__block">
				<div class="company-section__block__list">
					リストが入ります。
				</div>

				<div class="company-section__block__table">
					テーブルが入ります。
				</div>
			</div>
		</div>
	

こんな感じです。

見ての通り、親のclass名を「__」で繋いで行くスタイルなので、子要素になるにつれclass名がどんどん長くなっていきます。

こんなに長いclass名、慣れない方は見るだけでやる気が無くなってしまうかもしれませんね。（実務ではもっと長いclass名も余裕で使う）

「BEM式」がオススメな理由

「class名が長い」という最強で最大のデメリットを除けば、
・可読性が高い
・メンテナンス性が高い
・ブラウザ負担が軽減される
と、BEM式はメリット尽くし。

特に、意外と知られていませんが「ブラウザ負担が軽減される」というメリットが個人的には大きいと思っています。

ブラウザはcssを右から左に読んでいく

例えばこんなhtml/cssがあったとします。

▼html

	
		<div class="company-section">
			<ul class="list-block-pattern-a">
				<li>リストの中身</li>
				<li>リストの中身</li>
				<li>リストの中身</li>
			</ul>

			<ul class="list-block-pattern-b">
				<li>リストの中身</li>
				<li>リストの中身</li>
				<li>リストの中身</li>
			</ul>
		</div>
	

▼css

	
		.company-section .list-block-pattern-a li {
			font-weight: bold;
		}
	

上記の場合、見ての通り「.list-block-pattern-a」の中の「li」 だけが太字になります。
そしてそれはcssにて「“.list-block-pattern-a”の中の“li”」と指定しているからですね。

さてブラウザの挙動についてですが、一般的なブラウザは、まずページ内の「li」を全て洗い出し、その次に「“.list-block-pattern-a”の中にあるものだけに絞る」という順序で該当要素を抽出しています。

だからそもそも

	
		～～ li {}
	

となるこの書き方自体が、ブラウザにとってはベストでは無いのです。

ブラウザが「最初に全ての“子”を見つける」という挙動をしていることを考えると、「子要素一つ一つにもオリジナルのclass名を付与する」というのが（ブラウザにとって）ベストな命名規則になります。

そしてそれは「BEM」に従うと、自然と解決します。（もしかしたらBEMはブラウザのこの挙動も想定して開発されたのかもしれない）

SASS（SCSS）が主流になってからは、より一層「入れ子」でcssを書きやすくなったので、それもあって子要素は無名でコーディングしてる人も多いと思います。

もちろんそれも間違いでは無いですが、パフォーマンスを突き詰めて考えると、今のところBEMがベストなのかもしれません。

まとめ

何がベストなのかは組織やプロジェクトによっても異なるので一概には言えません。

しかしBEMが、「ブラウザにとって効率的な書き方」かつ「可読性が高い」という大きなメリットを兼ね備えている事実があるので、弊社では取り入れています。

というわけで、class名の規則で迷われた方は是非「BEM」を検討してみてください。