第3章 - 0006 mod-button-0001のコードからポイントを読み取ろう

この節について

mod-button-0001のコードを読み返しながら、第2章で最重要ポイントとして挙げた幾つかの項目について復習し、新しいポイントについても学んでいきましょう。

mod-heading-0001に含まれる最重要ポイントを確認しよう

ほとんどは毎回含まれていて当たり前といえる項目ですが、このモジュールには以下のポイントが含まれています。
繰り返しになりますが、今後もこれらを確実に身につけていきましょう。

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

mod-button-0001を読み返しながら新しいポイントについて学ぼう

概要

mod-button-0001のコードから読み取れるポイントとして以下のようなことが挙げられます。

  1. Modifierを効率よく分ける
  2. disabledには!importantを使用する
  3. モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する

1. Modifierを効率よく分ける

mod-button-0001のModifierクラスを分類すると以下のように分類できます。

1-1. 状態をdisabledにする
1-2. display: inline-blockにする
1-3. 色を変更する
1-4. 高さ(形状)を変更する
1-5. アイコンの表示位置を変更する

このようにModifierを上手く分割しておくと、タグに付与する組み合わせを変えることによって多くのスタイルを適用でき、コードの量も少なく済むので管理しやすくなります。

1-1から1-4までの分類については他のモジュールでModifierを作成するときにも生かしやすい分け方だと思います。

しかし「第3章 - 0004 mod-heading-0001のコードからポイントを読み取ろう」の「Modifierクラスをむやみに定義しない」の項で説明したとおり、どういう使い方をすべきモジュールなのかできるだけわかりやすくすることを念頭に置いて、Modifierクラスを作成するのか、新しいモジュールとして定義するのかなど、適宜判断しましょう。

2. disabledには!importantを使用する

原則として!importantは使用禁止ですが、コードの読みやすさを優先しています。

また、disabledの状態は詳細度やscssファイル内における記述順に拘らず、他のどのModifierよりも優先されるべきであるという明確な意図で使用しています。

3. モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する

第2章 - 0002 mod-example-0001の復習をしながらとてもやさしいCSS設計の「最重要ポイント」を学ぼう」で最重要ポイントとして、「3. モジュールの幅は固定しない」「4. 位置調整のプロパティはBlockクラスやBlockのModifierクラスに設定しない」ということを挙げました。

ではどのようにして、モジュールの「幅」と「位置調整」をするのかをこれから説明していきます。

表題の通り「モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する」ということになりますが、具体例としてmod-button-0001のコードを読み返してみると、以下のElementクラスで位置調整をしていることがわかります。

  • mod-button-0001__before-icon-wrapper
  • mod-button-0001__after-icon-wrapper

こうすることによって、予め作成しておいたアイコンフォントのモジュール <i class="fas fa-cat"></i> には何も手を加えず、コピー&ペーストしただけで済んでいます。

また、モジュールの境界や担う役割が以下のように明確になります。

  • mod-button-0001のElementクラスの役割: どこにどのようにアイコンを表示させるか
  • アイコンモジュールの役割: 何も手を加えずそのまま置くだけ

このように、親モジュールと子モジュールの役割を整理すると、モジュールを多重に入れ子にしていっても、各モジュールの境界は明確で、scssのコードはメンテナンスしやすい状態を保てます。

「親モジュールのElementクラスで表示位置を調整し、子モジュールはただ置くだけ」という方法を確実に身につけていってください。

続きはこちら

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