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

この節について

mod-container-0001のコードを読み返しながら、新しいポイントについても学んでいきましょう。

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

概要

この節で学習する新しいポイントとして以下のことが挙げられます。

  1. mod-container-xxxxクラスの役割を理解する
  2. 隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する

1. mod-container-xxxxクラスの役割を理解する

このとてもやさしいCSS設計では、mod-container-xxxxと命名するクラスに特別な役割を持たせています。
mod-container-xxxxのxxxxの部分は数字でも良いですし、複数の単語でも大丈夫です。

例えば以下のようにHTMLドキュメントを単純化した場合に、h2のセクションの外郭を担うのがmod-container-xxxxの役割としています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<h1>ドキュメント</h1>

<div class="mod-container-xxxx">
<h2>h2セクション</h2>
<div class="mod-other-name">
<h3>h3セクション</h3>
</div>
</div>

<div class="mod-container-xxxx">
<h2>h2セクション</h2>
<div class="mod-other-name">
<h3>h3セクション</h3>
</div>
</div>
</body>

色々なページを作っていくうえで、mod-container-0002やmod-container-0003などを作成していく場合も、h2セクションの外郭を表現する役割を与えます。
これは第5章でページを作成する過程で説明することにも関係がありますが、bodyからh2セクションの外郭のクラス名までは、厳格な命名規則を設けてHTMLとCSSのコーディングをパターン化して捉えることで、クラスの命名やブロックの分け方などに迷うことを減らし、本質的なスタイリングに集中できるようにしています。

h3セクションの外郭を表現するうえでは特にクラス名のルールは設けていません。
あまり細部まで厳格なルールを設けると後から変更し難いコードになってしまう側面もあるため、厳格なルールを設けるのはh2セクションの外郭までに留めています。

2. 隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する

Blockクラス、Elementクラス、Modifierクラス、それぞれが付与されたタグが色々な組み合わせで隣接します。
Elementクラス同士は同じ組み合わせで隣接する場合が多くありますが、それでも同じ組み合わせばかりではありません。

_mod-container-0001.scssでは、以下のように隣接兄弟要素セレクタでmargin-topを設定しました。

1
2
3
.mod-container-0001 + & {
margin-top: 48px;
}

この方法は例えば以下の場合に有効です。

  • mod-container-0001がどの要素とも隣接していない場合(:first-childの場合)にはmargin-topを設定しない
  • mod-example-0001とmod-container-0001が隣接兄弟要素となったときにはmargin-topを変更したい

記述する場所としては_mod-container-0001.scssに記述したように、各scssファイルの下部にコメントと一緒にまとめて書いておくと良いと思います。

また、例えばmod-example-0001とmod-container-0001が隣接兄弟要素となった場合の、mod-container-0001のmargin-topを設定したいときは、_mod-example-0001.scssの方に書かないように気をつけましょう。
あくまでも.mod-container-0001のスタイルを設定しているので_mod-container-0001.scssの方に書きます。

この方法を使用してサイトの構築や運用を続けていくと、例えば以下のように色々な要素とのmarginを個別に定義しやすくなります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.mod-container-0001 {
〜略〜

// 隣接兄弟要素セレクタによるマージン
.mod-a + &,
.mod-b + &,
.mod-c + &,
.mod-d + &,
.mod-container-0001 + & {
margin-top: 48px;
}
.mod-e__element + & {
margin-top: 12px;
}
.mod-f--modifier + & {
margin-top: 24px;
}
}

上記のように、ElementクラスやModifierクラスとの隣接兄弟要素セレクタを使用しても問題ありません。

そして、この例からはmargin-top: 48px;が最も多く使用されていることがわかります。

このように、ある程度サイトの構築や運用を継続してきた段階で、よく使用されているmargin-topの値がわかってきたら、以下のようにmargin-top: 48px;をBlockクラスの初期値として設定すると、その後は新たな隣接兄弟要素セレクタを追記する手間を省くことができるでしょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.mod-container-0001 {
margin-top: 48px;
&:first-child {
margin-top: 0;
}
〜略〜

// 隣接兄弟要素セレクタによるマージン
.mod-e__element + & {
margin-top: 12px;
}
.mod-f--modifier + & {
margin-top: 24px;
}
}

このとき、&:first-childセレクタによる打ち消しも同時に記述したことにも注目してください。

このように&:first-childセレクタでmargin-top: 0;にしておくと、モジュールを入れ子にするときもmargin-topが邪魔になる心配がなく、兄弟要素とのマージンとしてのみ効果を発揮します。

今回はBlockクラスのmargin-topを設定する例での説明となりましたが、「第3章 - 0004 mod-heading-0001のコードからポイントを読み取ろう」でも説明した通り、ElementクラスやModifierクラスが隣接する場合も同様であり、marginの方向も場合によって変化することは知っておいてください。

この節の終わりに

この節では、mod-container-xxxxの役割や、隣接兄弟要素セレクタによるmargin-topの制御の方法について新たに学習できました。

以下の隣接兄弟要素セレクタを使いこなして、Blockクラスのmargin-topを自由自在に制御してみましょう。

  • Blockクラス + Blockクラス
  • Elementクラス + Blockクラス
  • BlockのModifierクラス + Blockクラス
  • ElementのModifierクラス + Blockクラス

続きはこちら

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