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

この章について

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

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

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

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

それでは具体的に

  • 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、buttonなどが代表的なBlock名として挙げられます。
私はそれら全てのモジュールに mod- という接頭辞をつけることにしています。

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

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

scssファイルの作成

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

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

コマンドで作成しても良いですし、右クリックなどで開くコンテキストメニューなどからでも良いです。

Windowsのコマンドプロンプトで作成する場合

tutorialディレクトリ内で以下のコマンドを実行すると空ファイルが作成できます。

1
copy nul src\scss\modules\_mod-example-0001.scss

Macのターミナルで作成する場合

tutorialディレクトリ内で以下のコマンドを実行すると空ファイルが作成できます。

1
touch src/scss/modules/_mod-example-0001.scss

この章では、スタイルを src/scss/modules/_mod-example-0001.scss に記述しながら以降の説明を進めていきます。

src/scss/module-list.scssの編集

module-list.scssに以下の内容を追記します。

1
2
// modules
@import "./modules/*";

追記した後のmodule-list.scssは以下のようになります。

1
2
3
4
5
6
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

// modules
@import "./modules/*";

@import "./modules/*"; のようにディレクトリ内の全てのファイルを表す * を使用していますが、環境によっては使用できないかもしれないので、その場合は一つずつファイルパスを指定してください。

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-0001 と mod-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-item と mod-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設計チュートリアルの目次へ戻る