第2章 - 0002 mod-example-0001の復習をしながらとてもやさしいCSS設計の「最重要ポイント」を学ぼう

この節について

前の節で作成したmod-example-0001のソースコードをもとにモジュール作成の最重要ポイントを解説していきます。

あまり細かなことまで挙げすぎるとキリがないので、この節では「とてもやさしいCSS設計」においての土台となる最重要ポイントに照準を絞って解説していきます。

  1. 1モジュールにつき1ファイル作成する
  2. BEMの命名規則に則ってクラス名を決める
  3. モジュールの幅は固定しない
  4. 位置調整のプロパティはBlockクラスやBlockのModifierクラスに設定しない
  5. Elementの影響範囲はBlock内に絞る
  6. Modifierは元となるクラスと一緒に付与したときだけスタイルを適用する
  7. 親セレクタ参照(&)をクラス名の一部として使用しない

1. 1モジュールにつき1ファイル作成する

そのままの意味ですが、ファイルを適切な粒度で分割することはCSSを管理するうえで重要な考え方です。

2. BEMの命名規則に則ってクラス名を決める

前の節で挙げた通りですが、以下の4種類の命名規則が無いと「とてもやさしいCSS設計」は成り立ちません。

  • Block
  • BlockのModifier
  • Element
  • ElementのModifier

たったの4種類なので、第3章でモジュールを作成しているうちに慣れてくると思います。

3. モジュールの幅は固定しない

モジュールの幅は以下のどちらかになるようにします。

  • 親要素の幅いっぱいに広がる
  • 中に入っている文字数などに合わせて広がる

親要素の幅いっぱいに広がるようにするというのは、module-list.htmlをブラウザ開いて、mod-example-0001を見ていただくとわかると思います。

中に入っている文字数などに合わせて広がるというのは、display:inline-block;のプロパティを設定したときを想像するとわかりやすいと思います。

モジュールの幅を固定してしまうと著しくモジュールの汎用性が低下してしまいます。
モジュールの汎用性を保つことで、コードをシンプルに保つことができ、CSSの管理がしやすくなります。

4. 位置調整のプロパティはBlockクラスやBlockのModifierクラスに設定しない

表示位置を調整する以下のようなプロパティはBlockクラスにはもちろんのこと、BlockのModifierクラスにも設定しません。

4-1. float
4-2. position、top、right、bottom、leftなどによる位置調整
4-3. 左右のmargin
4-4. z-index

これらのプロパティはモジュールを使用する場所ごとに他の要素との関係性を調整するためのプロパティであり、使用する場所ごとに違う値を設定することが多いため、汎用モジュールの基本的な値として設定しません。

BlockクラスやBlockのModifierクラスに設定してしまうと著しくモジュールの汎用性が低下してしまいます。

5. Elementの影響範囲はBlock内に絞る

コンパイル結果であるmodule-list.cssの一部を抜粋した以下のコードを見ていただくとわかりやすいと思います。

1
2
3
.mod-example-0001 .mod-example-0001__first-element {
  padding: 6px;
}

mod-example-0001__first-elementクラスは必ず.mod-example-0001クラスよりも内側のタグに付与しないとスタイルが適用されないようにしています。

その理由については「7. 親セレクタ参照(&)をクラス名の一部として使用しない」で述べます。

6. Modifierは元となるクラスと一緒に付与したときだけスタイルを適用する

コンパイル結果であるmodule-list.cssの一部を抜粋した以下のコードを見ていただくとわかりやすいと思います。

1
2
3
4
.mod-example-0001.mod-example-0001--danger {
  background: #ffeeee;
  border: 1px solid #cc3333;
}

上記のコードから、BlockとそのModifierが一緒に付与されたときだけスタイルが適用されることがわかります。

以下のコードは、コンパイル結果のうちElementのModifierを抜粋したものです。

1
2
3
.mod-example-0001 .mod-example-0001__list-item.mod-example-0001__list-item--danger {
  color: #cc3333;
}

こちらもElementとそのModifierが一緒に付与されたときだけスタイルが適用されることがわかります。

Modifierは元となるクラスのプロパティを上書きする役割から、元となるクラスよりも詳細度を少し高くする方がクラスを記述する順番に拘らず確実にプロパティを上書きでき、余計なことに頭を使わなくて済むことが理由のひとつです。

もうひとつの理由は「7. 親セレクタ参照(&)をクラス名の一部として使用しない」で述べます。

CSSの詳細度についてここでは説明しませんが、CSSを書くうえでは非常に重要なことのひとつですので、CSSの詳細度についてまだ知らないという方はWebで検索しておくことをおすすめします。

7. 親セレクタ参照(&)をクラス名の一部として使用しない

これは「5. Elementの影響範囲はBlock内に絞る」と「6. 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;
  &--danger {
    background: #ffeeee;
    border: 1px solid #cc3333;
  }
  &__first-element {
    padding: 6px;
  }
  &__list-group {
    list-style: disc;
  }
  &__list-item {
    color: #222222;
    &--danger {
      color: #cc3333;
    }
  }
}

Webページのレイアウトが崩れたときに、ブラウザの開発者ツールを使用して修正対象となるクラスを特定することはよくあると思いますが、例えばmod-example-0001__first-elementのスタイルが原因だとわかったときに、tutorial/srcディレクトリ内を.mod-example-0001__first-elementで検索すると修正対象のコードが素早く見つけられることが1つ目の理由です。

また、&をクラス名の一部として使用したときのコンパイル結果の一部を抜粋すると以下のようになります。

1
2
3
4
5
6
7
8
9
.mod-example-0001 {
  〜略〜
}
.mod-example-0001__first-element {
  padding: 6px;
}
.mod-example-0001__list-item--danger {
  color: #cc3333;
}

こうなると、例えば文字の色を赤くしたいと思ったときに、どこにあるタグにmod-example-0001__list-item--dangerを付与しても赤くすることができてしまいます。

特に人数の多いチームになると、ほんの少しの軽い気持ちや見落としでBEMのルールから外れたクラス付与を行ってしまったり、スケジュールが逼迫していることを理由に、BEMのルールの理解が不十分なままの新メンバーを実務にアサインして、Blockよりも外側のタグにクラス付与が行われることになってしまい、そのまま長期的な運用をしていくうちに他のメンバーが気付かないところで少しずつ壊れていくケースはこれまでに多く目にしてきました。

このような問題を可能な限り減らすためには、クラスをHTMLに付与する人がBEMのルールを正しく理解し、そのルールを守ることはもちろん重要ですが、それよりも前の段階、つまりCSSの書き方においてもクラスの影響範囲をチームが意図したBlock内に制限することで、Block外のタグへのクラス付与を防ぎ、CSS編集時には想定外の箇所への影響が起こらない、長期的にメンテナンスしやすいCSSになるようにしています。

少し説明が長くなりましたが、これが2つ目の理由です。

とてもやさしいCSS設計では、特にこの2つ目の理由は重要視しており、最重要ポイントの「5. Elementの影響範囲はBlock内に絞る」と「6. Modifierは元となるクラスと一緒に付与したときだけスタイルを適用する」に挙げています。

この節のおわりに

正直なところ、第1章〜第2章のこの記事までを反復学習して理解していただくだけでも、Webサイトの制作や運用で頻出するパターンについては対応できる。と言って良いぐらいのことを既に説明し終えてしまいました。

この最重要ポイントを守ってさえいれば、scssのコードがどんなに煩雑になったとしても、影響はBlock内だけに留められますし、設計に失敗したモジュールだけを差し替えれば済むので安心です。

ぜひこの最重要ポイントを繰り返し読み返し、しっかりと理解していただけたらと思います。

とはいえ、これではまだ土台だけであり、

  • 実際にページを完成させるまでには具体的にどうしたら良いのか
  • 頻出するパターン以外に対応するにはどうしたら良いのか

ということがまだ説明できていないので、もっと多くのモジュールやページを実際に作成しながら、具体的に説明していこうと思います。

続きはこちら

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