BEMの考え方を基にしたHTML / CSSのid・classの命名規則

概要

id・classの命名規則についてはGoogleのガイドラインや、BEMがあることで、ある程度指標ができておりますが、仕事で使うガイドラインを制作するにあたって、どのような形が望ましいのか、考えなおそうと思い、色々情報を集めていました。
BEMの考え方が個人的に良かったので、採用しようと思ったのですが、BEMは少し冗長になりがちなので、個人的にはそこを改善したいのと、無駄になりそうな要素はなるべく減らして行きたかったので、BEMの考え方を基に少しカスタマイズして、命名規則を思案しました。

BEM

記事も揃っておりますので、ここには特筆はしません。
簡単な説明のみとさせていただきます。

BEMとは？

「Block」「Element」「Modifier」の頭文字。BEM（ベム）と呼びます。

• Block / 構成のルートとなる親要素。
• Element / Blockに付随する子要素。
• Modifier / 状態変化を表す要素。

BEM参考文献

BEMについては下記URLを参考にしております。
BEMについて知りたいor気になる方は下記のURLを参照してください。

• BEM
• BEM-Methodology（Definitionsの日本語訳）
• MindBEMding
• BEMという命名規則とSass 3.3の新しい記法
• BEMを参考にしたCSS設計

BEMの命名規則

• Blockは単語
• BlockとElementは「アンスコ：2」で繋ぐ
• BlockまたはElementとModifierは「ハイフン：2」で繋ぐ

HTML

<div class="block">
  <div class="block__element"></div>
  <div class="block__element block__element--modifier"></div>
</div>

SCSS

.block {
  &__element {
    &--modifier{}
  }
}

CSS

.block {}

.block__element {}

.block__element--modifier {}

BEMの考え方を基にした命名規則

BEMの考え方を採用しますが、そのままの使用方法では使用しません。考え方を基に記述方法を下記の規則に則り使用するものとします。

基本規則

1. 使用単語にはその箇所を表す適切な英単語を用いる。
2. 省略できる単語はできるだけ省略形式で記述する。
3. 3語以上の連結は可能な限り避ける

BEMのカスタマイズ規則

• Blockは単語
• Block名が2単語以上からなる場合はキャメルケースで繋ぐ
• BlockとElementはスネークケースで繋ぐ
• Modifierは単語
• Modifierで使用した単語は独立して存在してはいけない

Block名が2単語からなる場合

キャメルケース

Main column ⇒ mainCol

使用例

HTML

<div class="block">
  <div class="block_element"></div>
  <div class="block_element modifier"></div>
</div>

<div class="blockBlock">
  <div class="blockBlock_element"></div>
  <div class="blockBlock_element modifier"></div>
</div>

SCSS

.block {
  &_element {
    &.modifier {}
  }
}

.blockBlock {
  &_element {
    &.modifier {}
  }
}

CSS

.block {}
.block_element {}
.block_element.modifier {}

.blockBlock {}
.blockBlock_element {}
.blockBlock_element.modifier {}

Modifierで使用した単語が独立して存在するのはNG

Modifierは必ず何かの連結するクラスとする。
下記のように独立して存在してはいけない。

NG

<div class="modifier"></div>

NG

.modifier {}

共通クラスを制作する場合の命名規則

共通クラスが必要な場合、基本は上記の規則と考え方は変わりませんが、
Blockに依存しないクラスになりますので、必要要素が変わる。

• Element / 役割
• Description / Elementの説明

必要に応じてModifierを設定は自由、その場合は上記の規則の通り。

規則

• Element名はBlock名と同一の物は使用不可
• Elementのみでは存在してはいけない
• ElementとDescriptionはチェインケースで繋ぐ

使用例

注釈文

HTML

<p class="annot-txt"></p>

css

.annot-txt {}

大規模なページ構成になる場合の命名規則

自身の行っている仕事がどうしても大規模になることが多く、同様のBlockが複数のページにまたがって違うデザインで採用される時があり、要素構成は似ているのに別の名前を付けないければ行けない場合が出てきたので、その際に処置です。

BEMにPageを付け加える

• Page / 制作するページ
• Block / 構成のルートとなる親要素。
• Element / Blockに付随する子要素。
• Modifier / 状態変化を表す要素

使用例

HTML

<div class="pageBlock">
  <div class="pageBlock_element"></div>
  <div class="pageBlock_element modifier"></div>
</div>

SCSS

.pageBlock {
  &_element {
    &.modifier {
    }
  }
}

注釈

基本的な形としては昔からよくある形、考え方で落ち着いた気がします。BEMの考え方は明確にされているので、それに合わせて統制を取った感じですが、個人的にこのぐらいが使いやすいような気がします。

キャメル・スネーク・チェインケースについて

複合語の接続ケースについて混在するのを嫌う人は多くいるのはよく聞きます。しかし、ローカルでルール化がされていれば混在は問題無いと考えています。
問題があるのは混在することではなく、ルール化がなされず、その場その場の流れで使い分けしてる雰囲気を出して使用してしまう事だと思っています。

BEMについて

BEMの考え方大変良いと思いますが、そのままの使用はベストプラクティスではないと考えます。
BEMは昔からよくある考え方を明確化された物ですが、自身では、それの使用方法については、環境や状況で最適解は変化するものだと考えているので、あくまであの考え方を指標として、使用法は状況によって形を変化させるのが最適だと思います。

Google style guideについて

基本的なコーディング規約はGoogleのガイドラインを参照して行ってますが、命名規則についてはチェインケースだけだとやはりわかりづらいと思ったので、採用は見送りました。
あと、よく最近「Googleが推奨してるからこの形で」って話を見るんですが、推奨するとは書いてないような気がするのと、あれはあくまでGoogle社内の規約内容だと認識しているので、あれに合わせる必要はあまり感じませんでした。