この節について
mod-button-0001のコードを読み返しながら、第2章で最重要ポイントとして挙げた幾つかの項目について復習し、新しいポイントについても学んでいきましょう。
mod-button-0001に含まれる最重要ポイントを確認しよう
ほとんどは毎回含まれていて当たり前といえる項目ですが、このモジュールには以下のポイントが含まれています。
繰り返しになりますが、今後もこれらを確実に身につけていきましょう。
- 1モジュールにつき1ファイル作成する
- BEMの命名規則に則ってクラス名を決める
- モジュールの幅は固定しない
- 位置調整のプロパティはBlockクラスに設定しない
- Modifierクラスは元となるクラスと一緒に付与したときだけスタイルを適用する
- 親セレクタ参照(&)をクラス名の一部として使用しない
mod-button-0001のコードを読み返しながら新しいポイントについて学ぼう
概要
mod-button-0001のコードを元に説明する新しいポイントとして以下のようなことが挙げられます。
- Modifierを効率よく分ける
- disabledには!importantを使用してもよい
- モジュールを入れ子にする場合は親モジュールの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章 4節 mod-heading-0001のコードからポイントを読み取ろう」の「Modifierクラスをむやみに定義しない」の項で説明したとおり、どういう使い方をすべきモジュールなのかできるだけわかりやすくすることを念頭に置いて、Modifierクラスを作成するのか、新しいモジュールとして定義するのかなど、適宜判断しましょう。
2. disabledには!importantを使用してもよい
原則として!importantは使用禁止ですが、コードの読みやすさを優先しています。
また、disabledの状態は詳細度やscssファイル内における記述順に拘らず、他のどのModifierよりも優先されるべきであるという明確な意図で使用しています。
このルールはボタンやフォームのフィールド(input, select, textarea)などのように複数のModifierを同時に付与することがあるモジュールであったり、hoverやfocusなどの擬似クラスを利用したスタイル適用をしているモジュールの場合で、複数のModifierを付与したときでも一番優先されるべきModifierが明確であるときだけ、コードの読みやすさを優先して !important を使用できるようにしています。
3. モジュールを入れ子にする場合は親モジュールのElementクラスで子モジュールの幅や表示位置を調整する
「第2章 2節 mod-example-0001の復習をしながらとてもやさしいCSS設計の「最重要ポイント」を学ぼう」で最重要ポイントとして、「3. モジュールの幅は固定しない」「4. 位置調整のプロパティはBlockクラスに設定しない」ということを挙げました。
ではどのようにしてモジュールの幅や表示位置の調整をしたら良いかについて、これから説明していきます。
表題の通り「モジュールを入れ子にする場合は親モジュールのElementクラスで子モジュールの幅や表示位置を調整する」という方法が、そのひとつになりますが、具体例としてmod-button-0001のコードを読み返してみると、以下のElementクラスで表示位置を調整していることがわかります。
mod-button-0001__before-icon-wrappermod-button-0001__after-icon-wrapper
こうすることによって、予め作成してあるアイコンフォントのモジュール <i class="fas fa-cat"></i> のスタイルには何も手を加えず、予めmodule-list.htmlに用意しておいたモジュールをコピー＆ペーストしただけで済んでいます。
このとき、モジュールの境界や担う役割が以下のように明確になっていることに注目してください。
- どこにどのようにアイコンを表示させるかは親モジュールの都合なので、親モジュールのElementクラスがその役割を担う
- 子モジュールのスタイルにはできるだけ手を加えずただ置くだけ
このように親モジュールと子モジュールの役割を整理すると、モジュールを多重に入れ子にしていっても、各モジュールの境界はわかりやすく、SCSSのコードはメンテナンスしやすい状態を保てます。
説明が長くなってしまいましたが、「モジュールを入れ子にする場合は親モジュールのElementクラスで子モジュールの幅や表示位置を調整する」という方法を利用し、子モジュールのスタイルには手を加えることなく「ただ置くだけ」になるように意識することで、SCSSのコードはシンプルに保たれますので、ぜひ実践していってください。