クラス命名規則 : クラス名（クラス設計）ルール

ここからが吉本式BEM設計（BEM設計ベース）のメインになります。
まずは、基本設計についてですが、ベースとなる考え方はBEM設計となります。
BEM設計について知識がない場合、とても素晴らしい概念ですので、ぜひ習得してください。
ここではBEM設計については詳しく解説しません。
ある程度知識がある、または実務でBEM設計で構築しているというマークアップエンジニアをターゲットとします。
少しだけここで（吉本式BEM設計（BEM設計ベース）的に）解説すると、BEM設計とは「ブロック（Block）」「エレメント（Element）」「モディファイア（Modifier）」の3つの概念があります。

ブロック（Block）
いくつかのエレメントで構成されたアウトライン要素。この要素は、独立されており、ページのどこに配置しても機能する（CSSが正しく機能する）要素にしなければなりません。（再利用性）
要素の例として、ヘッダー、フッター、ナビゲーション、コンテンツなどが代表的です。

エレメント（Element）
1つ1つの要素です。エレメントは必ずブロック（Block）の中に存在します。
要素の例として、タイトル、テキスト、ボタン、画像、テーブル（表組み）、リストなどが代表的です。

モディファイア（Modifier）
ブロック、エレメントの状態や装飾（レイアウト）のバリエーションを持たせるためのパターンを設定するための概念です。
例えば、アクティブな状態などです。

これらの頭文字をとってBEMと呼んでいます。
BEM設計で構築することでのメリットは、「再利用性」「拡張性」「メンテナンス性」と言われていますが、正直なところ、BEM設計の解釈も個人それぞれ違ってくるため、「拡張性」「メンテナンス性」については、共通のBEM設計の認識を持たなければ、難しいところです。
そこで、このBEM設計をベースにした吉本式BEM設計（BEM設計ベース）で構築することで、よりわかりやすいクラス設計・ファイル設計になります。

BEM設計のクラス命名規則

まず前提として、次のルールを設けます。

CSS実装ルール 1: idを使用しない。

CSSではidを使用しません。
ここ最近のWebサイトを見ると、CSSでidを使用しないソースコードが増えてきていますが、たまにまだ見かけます。
BEM設計に限らず、CSSでidを使用しない考え方が普通になってきています。
理由としては、id指定しなければいけない理由が特になく、class指定で統一できるので、統一しましょう。
というのが最もな理由です。
コーディング速度上げる一番の考え方は「迷いをなくす」ということです。
今までにもし「id指定にするかclass指定にするか」で悩むケースがもしあった場合、class指定で統一するというルールさえ決めておけば、その迷いはなくなり、コーディング速度は上がります。

それでは本題に戻ります。
吉本式BEM設計（BEM設計ベース）のクラスの命名規則を解説する前に、まずBEM設計でのクラスの命名規則を紹介します。
次の通りです。

ブロック（Block）
特に縛りはありません。
例）block, header, footer, content-header, Main, sideNav

<header class="header">
</header>

<main class="main">
</main>

<footer class="footer">
</footer>

エレメント（Element）
Block名 + __ + Element名
そのエレメントが属するBlockのブロック名を頭に付け、アンダースコア（_）を2つ付けて、そのエレメントの名前を付ける。
例）block__element, header__title, footer__table, content-header__inner, Main__category, sideNav__home-button

<header class="header">
<p class="header__logo"></p>
</header>

<main class="main">
<div class="main__inner"></div>
</main>

<footer class="footer">
<p class="footer__text"></p>
</footer>

モディファイア（Modifier）
Block名 + __ + Element名 + - + Modifier名
モディファイアは、先ほども述べた通り、ブロック、エレメントの状態や装飾（レイアウト）のバリエーションを持たせるためのパターンを設定ものですので、既存のBlockやElementのクラス名は保持し、新たにモディファイアのクラスを追加するような設定になります。
例）block__element block__element-state, sideNav__home-button sideNav__home-button-active

<header class="header header-home">
<p class="header__logo header__logo-large"></p>
</header>

<main class="main main-home">
<div class="main__inner main__inner-single"></div>
</main>

<footer class="footer footer-home">
<p class="footer__text footer__text-strong"></p>
</footer>

以上が、BEM設計のクラスの命名規則です。
私がBEM設計の知識を身につけた時に最初に感じたことは、クラス名、めっちゃ長くなる・・・ということです。
ソースコードの美しさを追求していた自分としては、とても許容できることではありませんでした。
例えば、次のソースコードは実際に公開されているBEM設計のWebサイトです。

<div class="header">
	<div class="header__inner">
		<header class="header__main">
			<h1 class="header__logo"><img src="./img/xxx.png" alt=""></h1>
			<div class="header__utility">
				<div class="header-utility">
					<ul class="header-utility__box">
						<li class="header-utility__box-item">
							<button class="header-utility__button header-utility__button--regist">登録</button>
						</li>
						<li class="header-utility__box-item">
							<button class="header-utility__button header-utility__button--login">ログイン</button>
						</li>
					</ul>
				</div>
			</div>
		</header>
	</div>
</div>

上のソースコードをみて、どう感じるでしょうか。

私の感想は、
クラス名が長い！
どこがブロックで、どこがエレメントなのかわかり難い！
ブロック名とエレメント名で同じ単語を使っていて見難い！
です。皆さんはどうでしょうか。
これだと第三者がもしソースコードを引き継いだときに、大変そうです。

それではここからが吉本式BEM設計（BEM設計ベース）の命名規則についてです。

吉本式BEM設計（BEM設計ベース）のクラス命名規則

命名規則 1: ブロック名に「-」「_」などの接続記号は使用しない。（スネークケース禁止）

例えば、先ほどのソースコードにあったheader-utilityなどはNGです。
理由は、クラス名が長くなる要因になるからです。

命名規則 2: ブロック名にキャメルケースも禁止

例えば、headerUtilityなどとするケースです。
大文字が入ることで、見栄えが悪くなりますし、これもクラス名が長くなる要因です。

では、どのようなクラス名にするか・・・、の前提として、まずブロック名がheader-utilityというような単語が2つになることは極力避けるべきです。
これまでの経験上、header-utilityというような単語が2つになる場合、headerとutilityのブロックを作る、ということにすべきケースがほとんどです。
ただ、2つの単語からなるクラス名が必要になるケースも出てきます。
その場合、省略形でクラス名を命名します。
私がコーディングする際、よく出てくるケースとして、コンテンツ内に出てくるヘッダーやフッターです。
2つの単語で、クラス名を命名する場合、content-header、content-footerとなりますが、これだとクラス名が長い。
そこで、私は、これらを頭文字をとって、ch、cfとしています。
「これだとクラス名から判断できない」と言われそうですが、吉本式BEM設計（BEM設計ベース）ではクラス名から何かを判断するということはありません。
大事なことは、そのクラスが、どのCSSファイルで設定されているかがすぐにわかることです。
これについては、今後別の記事で解説します。

続いて、エレメント名ですが、ここでは命名規則にのみ触れます。

命名規則 3: エレメント名は、Block名 + - + Element名とする。

例えば、header-titのような形になります。
これは、headerというブロック内に存在する、タイトル要素（エレメント）だと想定できます。

命名規則 4: エレメント名は、ブロック名同様にスネークケース・キャメルケースは禁止

これは先ほどブロック名の際に解説した理由と同様です。

続いて、モディファイア名についてです。

命名規則 5: モディファイア名は、_ + Modifier名とする。

例えば、_activeのような形です。
BEM設計では、Block名 + __ + Element名 + - + Modifier名というように、ブロック名とエレメント名を繰り返し使用していますが、これがクラス名が長くなる一番の原因です。

以上が、吉本式BEM設計（BEM設計ベース）の命名規則です。
上の例で出てきたソースコードを、吉本式BEM設計（BEM設計ベース）の命名規則で置き換えてみます。

<!-- header -->
<header class="header">
<div class="header-inner">
<div class="header-main">
<h1 class="header-logo"><img src="./img/xxx.png" alt=""></h1>
</div>
<div class="header-utility">

<!-- utility -->
<div class="utility">
<ul class="utility-list">
<li class="utility-item _regist"><button>新規会員登録</button></li>
<li class="utility-item _login"><button>ログイン</button></li>
</ul>
</div><!-- /utility -->

</div>
</div>
</header><!-- /header -->

吉本式BEM設計（BEM設計ベース）では、上のようになります。
マークアップやソースコードの形状も吉本式BEM設計（BEM設計ベース）にしていますが、header-mainやheader-utilityなどのdiv要素は不要になるはず・・・と思います。
そのほか、追記しておくと、吉本式BEM設計（BEM設計ベース）では、button要素などのいわゆる記述要素（インラインレベルの要素）には、極力クラスを設定しないというルールを決めています。
こちらについては、別の記事で改めて解説します。

本記事のテーマである「命名規則」については、以上となります。
上のソースコードを見て、より美しくなったと感じてもらえたら幸いです。