第2章 - 0001 BEMによるクラス命名規則を学ぼう

この章について

この章では、例となるモジュールの作成を通してCSSのクラス命名規則を学んでいきましょう。

基本となるディレクトリとファイルの準備

まずは「第1章 - 0001 基本的なディレクトリとファイルの準備をしよう」を読んで、基本となるディレクトリとファイルの準備をしてください。

具体的にモジュールを作成してみる

それでは具体的に

  • Block
  • Element
  • Modifier

の各クラスを定義しながらBEMの命名規則を学んでいきましょう。

例となるHTML

第1章で用意したpublic/html/module-list.htmlに以下のHTMLを追記してください。
これが今回作成するモジュール1つ分のHTMLになります。

ここにクラスを付与しながら説明を進めます。

1
2
3
4
5
6
7
8
9
10
11
12
<div>
<div>
<ul>
<li>
サンプル
</li>
<li>
サンプル
</li>
</ul>
</div>
</div>

Block名を決める

まずBlock名(= モジュール名)を決めます。

Block名とは、ひとかたまりのモジュール単位を表す名前で、例えばheader、footer、btnなどが代表的なBlock名として挙げられます。
私はそれら全てのモジュールに mod- という接頭辞をつけることにしています。

今回は例としてmod-example-0001という数字を含んだBlock名で説明を進めていきます。

Block名が複数の単語で構成される場合はハイフンでつなぎます。

scssファイルの作成

モジュールを管理しやすいように、1Blockにつき1ファイルを作成します。

ファイル名の命名規則は_Block名.scssです。

第1章で用意したsrc/scss/modules/_mod-example-0001.scssに記述しながら以降の説明を進めていきます。

Blockクラス

まずはBlockクラスを以下の通り記述します。
先ほど決めたBlock名がそのままクラス名になります。

1
2
3
4
5
6
.mod-example-0001 {
padding: 12px 24px;
background: #eeeeee;
border: 1px solid #cccccc;
font-size: 16px;
}

Blockクラスをモジュール単位の一番外側のタグに付与します。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="mod-example-0001">
<div>
<ul>
<li>
サンプル
</li>
<li>
サンプル
</li>
</ul>
</div>
</div>

Elementクラス(1つめ)

Elementクラスとは、Blockを構成する子孫要素クラスです。
Elementクラスの命名規則はBlock名__Element名のように、Block名とElement名の間をアンダースコア2つで繋ぐルールになっています。

今回は例として、以下のようにmod-example-0001__first-elementを追記することにします。
このクラス名は、mod-example-0001に属するfirst-elementという要素であることを表しています。
Element名も複数の単語で構成される場合はハイフンでつなぎます。

1
2
3
4
5
6
7
8
9
.mod-example-0001 {
padding: 12px 24px;
background: #eeeeee;
border: 1px solid #cccccc;
font-size: 16px;
.mod-example-0001__first-element {
padding: 6px;
}
}

以下のようにHTMLにクラスを付与します。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="mod-example-0001">
<div class="mod-example-0001__first-element">
<ul>
<li>
サンプル
</li>
<li>
サンプル
</li>
</ul>
</div>
</div>

Elementクラス(2つめ)

Blockは複数の子孫要素を包括することができます。
2つめのElementクラスを追記します。

以下の通りmod-example-0001__list-groupを追記することにします。
繰り返しになりますが、このクラス名は、mod-example-0001に属するlist-groupという要素であることを表しています。

1
2
3
4
5
6
7
8
9
10
11
12
.mod-example-0001 {
padding: 12px 24px;
background: #eeeeee;
border: 1px solid #cccccc;
font-size: 16px;
.mod-example-0001__first-element {
padding: 6px;
}
.mod-example-0001__list-group {
list-style: disc;
}
}

以下のようにHTMLにクラスを付与します。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="mod-example-0001">
<div class="mod-example-0001__first-element">
<ul class="mod-example-0001__list-group">
<li>
サンプル
</li>
<li>
サンプル
</li>
</ul>
</div>
</div>

このときよくある間違いはmod-example-0001__first-element__list-groupというように、ネストされている順に途中のエレメント名も合わせて__を二回書いてしまうことです。
あくまでも、どのBlockに属しているかを表しているだけなのでBlock名__Element名であり、クラス名の中に__は一回だけです。

Elementクラス(3つめ)

3つめのElementクラスを追記します。

以下の通りmod-example-0001__list-itemを追記することにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.mod-example-0001 {
padding: 12px 24px;
background: #eeeeee;
border: 1px solid #cccccc;
font-size: 16px;
.mod-example-0001__first-element {
padding: 6px;
}
.mod-example-0001__list-group {
list-style: disc;
}
.mod-example-0001__list-item {
color: #222222;
}
}

以下のようにHTMLにクラスを付与します。2つのliタグに同じクラスを付与することにします。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="mod-example-0001">
<div class="mod-example-0001__first-element">
<ul class="mod-example-0001__list-group">
<li class="mod-example-0001__list-item">
サンプル
</li>
<li class="mod-example-0001__list-item">
サンプル
</li>
</ul>
</div>
</div>

繰り返しになりますが、Elementクラスの命名規則はBlock名__Element名です。

BlockのModifierクラス

BlockのModifierクラスとは、Blockクラスと一緒に付与することによって、Blockクラスとその子孫要素のプロパティの一部を変化をさせるためのクラスです。
BlockのModifierクラスの命名規則はBlock名--Modifier名のように、Block名とModifier名の間をハイフン2つで繋ぐルールになっています。

色だけ違う派生モジュールを作るというのがModifierクラスの最もイメージしやすい使い方だと思います。

実際にBlockのModifierクラスを定義してみます。

以下の通りmod-example-0001--dangerを追記することにします。
このクラス名からは、-- の前を見るとmod-example-0001と一緒に付与するModifierクラスであることがわかります。
Modifierクラスを定義するとき、親セレクタ参照の&を忘れないように注意してください。
今回は1つの単語ですが、Modifier名も複数の単語で構成される場合はハイフンでつなぎます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.mod-example-0001 {
padding: 12px 24px;
background: #eeeeee;
border: 1px solid #cccccc;
font-size: 16px;
&.mod-example-0001--danger {
background: #ffeeee;
border: 1px solid #cc3333;
}
.mod-example-0001__first-element {
padding: 6px;
}
.mod-example-0001__list-group {
list-style: disc;
}
.mod-example-0001__list-item {
color: #222222;
}
}

以下のようにHTMLにクラスを付与します。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="mod-example-0001 mod-example-0001--danger">
<div class="mod-example-0001__first-element">
<ul class="mod-example-0001__list-group">
<li class="mod-example-0001__list-item">
サンプル
</li>
<li class="mod-example-0001__list-item">
サンプル
</li>
</ul>
</div>
</div>

私はModifierクラス単体では効果がないようにSCSSを記述することにしており、今回の例でいうとmod-example-0001mod-example-0001--dangerを一緒に付与したときだけ背景色が赤くなるようにしています。

ElementのModifierクラス

ElementのModifierクラスとは、特定のElementクラスと一緒に付与することによって、そのElementクラスと子孫要素のプロパティの一部を変化をさせるためのクラスです。
ElementのModifierクラスの命名規則はBlock名__Element名--Modifier名のように、Element名とModifier名の間をハイフン2つで繋ぐルールになっています。

以下の通りmod-example-0001__list-item--dangerを追記することにします。
このクラス名からは、-- の前を見るとmod-example-0001__list-itemと一緒に付与するModifierクラスであることがわかります。
Modifierクラスを定義するとき、親セレクタ参照の&を忘れないように注意してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.mod-example-0001 {
padding: 12px 24px;
background: #eeeeee;
border: 1px solid #cccccc;
font-size: 16px;
&.mod-example-0001--danger {
background: #ffeeee;
border: 1px solid #cc3333;
}
.mod-example-0001__first-element {
padding: 6px;
}
.mod-example-0001__list-group {
list-style: disc;
}
.mod-example-0001__list-item {
color: #222222;
&.mod-example-0001__list-item--danger {
color: #cc3333;
}
}
}

以下のように片方のliタグにクラスを付与することにします。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="mod-example-0001 mod-example-0001--danger">
<div class="mod-example-0001__first-element">
<ul class="mod-example-0001__list-group">
<li class="mod-example-0001__list-item mod-example-0001__list-item--danger">
サンプル
</li>
<li class="mod-example-0001__list-item">
サンプル
</li>
</ul>
</div>
</div>

私はElementのModifierクラスについても単体では効果がないようにSCSSを記述することにしており、今回の例でいうとmod-example-0001__list-itemmod-example-0001__list-item--dangerを一緒に付与したときだけ文字色が赤くなるようにしています。

命名規則のまとめ

これでBEMによる命名規則は一通り紹介できました。

まとめると以下の4種類の命名規則を理解すれば良いことになります。

分類 命名規則 具体例
Block Block名 mod-example-0001
BlockのModifier Block名–Modifier名 mod-example-0001–danger
Element Block名__Element名 mod-example-0001__list-item
ElementのModifier Block名__Element名–Modifier名 mod-example-0001__list-item–danger

これから「とてもやさしいCSS設計チュートリアル」で紹介していくCSSのクラス命名規則は必ずこの4種類のいずれかに当てはまります。
4種類しかないと思うと、とても簡単そうな感じがしてきませんか?

まだいまひとつピンとこないという方も大丈夫です。
第3章では、色々なモジュールを作成しながらBEMに慣れていけるように記事を用意しています。

続きはこちら

とてもやさしいCSS設計チュートリアルの目次へ戻る