この節について
mod-heading-0001のコードを読み返しながら、第2章で最重要ポイントとして挙げた幾つかの項目について復習し、新しいポイントについても学んでいきましょう。
mod-heading-0001に含まれる最重要ポイントを確認しよう
ほとんどは毎回含まれていて当たり前といえる項目ですが、このモジュールには以下のポイントが含まれています。
繰り返しになりますが、今後もこれらを確実に身につけていきましょう。
- 1モジュールにつき1ファイル作成する
- BEMの命名規則に則ってクラス名を決める
- モジュールの幅は固定しない
- 位置調整のプロパティはBlockクラスに設定しない
- Modifierクラスは元となるクラスと一緒に付与したときだけスタイルを適用する
- 親セレクタ参照(&)をクラス名の一部として使用しない
mod-heading-0001のコードを読み返しながら新しいポイントについて学ぼう
概要
mod-heading-0001のコードを元に説明する新しいポイントとして以下のようなことが挙げられます。
- 使用頻度の高いスタイルをベースにする
- Modifierクラスをむやみに定義しない
- 2つの要素間のmarginを設定するときは後の要素に設定する
- lv-1〜lv-6のクラスはh1〜h6タグに必ずしも付与するわけではない
1.使用頻度の高いスタイルをベースにする
一番使用頻度の高いスタイルをベースにするとHTMLを記述するときにすっきりします。
2. Modifierクラスをむやみに定義しない
Modifierクラスをあまり沢山定義し過ぎると、結局どういう使い方をすべきモジュールなのかわからなくなりがちです。
はっきりとした判断基準はありませんが、私は以下に挙げる条件のうち1つでも当てはまるときはModifierを定義することが多いです。
2-1. Modifierクラス名を見たときにどういう変化が起こるのか想像しやすい場合
2-2. 少ない数のタグからなるシンプルなモジュールの場合
2-3. JSで付けたり外したりすることが想定される場合
2-4. 色だけが変化する場合
今回のmod-heading-0001では、2-1と2-2が当てはまります。
2-1については、自分以外の誰が見てもわかりやすいか。数ヶ月後の自分が見てもわかりやすいか。ということも考えてみると良いでしょう。
2-2については、今回は1つのタグだけで構成されるモジュールで、非常にシンプルなものになっていることがわかると思います。
2-3については今回は当てはまりませんが、モジュールの状態を変化させるという挙動を実現するうえで、別モジュールとしてではなく、派生として定義するのが自然だと思います。
2-4についても今回は当てはまりませんが、色だけが変化する場合は非常に管理がしやすいため、ほぼ確実にModifierクラスとして定義しています。
3. 2つの要素間のmarginを設定するときは後の要素に設定する
少しわかりにくいと思いますので、具体例を示します。
例えば以下のようなHTMLがあったとします。
1 | <h1 class="mod-heading-0001"> |
この2つの要素間のmarginを設定したい場合は、後の要素であるmod-example-0001の方にmarginを設定するということです。
前の要素、後の要素とだけ表現したり、marginの方向を具体的に表現しないままでは説明がしにくいので、具体例として「この2つの要素間のmarginを設定したい場合は、後の要素であるmod-example-0001の方にmargin-topを設定する」と具体的に言い換えて説明を続けることにします。
このとき、あくまで2つの要素間のmarginを設定するのであり、mod-example-0001のmargin-bottomは設定しません。
もしmod-example-0001の後に記述される要素があれば、その要素にまたmargin-topを設定します。
「2つの要素間のmarginを設定するときは後の要素に設定する」と決めることで、marginの制御はとても容易なものになります。
そう決めておいた場合、例えばmod-example-0001の前に記述される要素が変わったときに、隣接兄弟要素セレクタでmod-example-0001のmargin-topを上書きすることで、柔軟にmargin-topを変更することができ、静的なページ制作時はもちろん、プログラムによって動的に表示要素が入れ替わるなどの変化にも対応しやすくなるからです。
また、第3章の2節でこのポイントに触れず、この節で初めてこのポイントについて触れたのには理由があります。
それは見出しモジュールはmargin-bottomを設定すると便利なモジュールの代表例だからです。
見出しモジュールは複数箇所で繰り返し使用されますが、用途がとても限定的で規則的に使用されます。
例えばあるWebサイトのデザインのルールとして「lv-2の見出しの下にはどんな要素が設置されても原則として20pxの余白を設ける」というルールを設定してデザインをしている場合は、予めmargin-bottom: 20px;を設定しておくと、見出しの下に設置する要素にmargin-top: 20px;をその都度設定するよりも手間が少なく済みますし、用途が限定的で規則的であることから、見出しモジュールはmargin-bottomを設定しておいても後々問題が起こり難いモジュールであるといえます。
しかしながら、長期間の運用を続けていくと当初想定していたルールから外れたイレギュラーが発生することはよくあり、要素間のmarginを20pxよりも縮めたくなったときには邪魔になります。
そのようなイレギュラーが発生したときは、margin-bottom: 0; にするModifierクラスを定義するなどして、問題を回避することはできますが、至る所にこのようなModifierクラスを定義して付与していくというのは場当たり的な対応であり、コードが煩雑になっていく要因となります。
より柔軟なCSS設計をする意味で、ぜひ「2つの要素間のmarginを設定するときは後の要素に設定する」方法を使用してみてください。
今回は、BlockクラスとBlockクラスが隣接する例を元に説明しましたが、ElementクラスやModifierクラスが隣接する場合でも同様です。
このポイントの説明については最後になりますが、当初「2つの要素間のmarginを設定したい場合は、後の要素であるmod-example-0001の方にmarginを設定する」として、marginの方向をはっきり定めていないのは、後の要素に設定するmarginの方向というのは場合によって異なり、例えば要素が横並びのときはmargin-leftやmargin-rigit、flex-direction: column-reverse;によって下から順に並べられた要素であれば、margin-bottomが設定されることになるということについても知っておいてほしいからです。
marginについては「第6章 marginを制御する方法についてより深く理解しよう」で改めて手を動かしてもらいながら詳しく解説しますが、今の段階では「2つの要素間のmarginを設定するときは後の要素に設定する」ということをまずは覚えていただければと思います。
4.lv-1〜lv-6のクラスはh1〜h6タグに必ずしも付与するわけではない
今回lv-1〜lv-6までのクラスを定義しましたが、これらはh1〜h6タグに使用するクラスと決まっているわけではなく、以下のようにdivに付与したり、h1にmod-heading-0001--lv-6を付与したりすることも想定しています。
1 | <div class="mod-heading-0001 mod-heading-0001--lv-6">見出し lv6</div> |
クラス名はあくまでも見た目を表しており、そうすることによってタグに依存しない汎用性の高いクラスになります。
もちろんh1〜h6タグの見出しレベルに合わせて付与しても大丈夫です。