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

この節について

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

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

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

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

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

概要

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

  1. 使用頻度の高いスタイルをベースにする
  2. Modifierクラスをむやみに定義しない
  3. margin-bottomを使用しない
  4. lv-1〜lv-6のクラスはh1〜h6タグに必ずしも付与するわけではない

1.使用頻度の高いスタイルをベースにする

一番使用頻度の高いスタイルをベースにするとHTMLを記述するときにすっきりします。

2. Modifierクラスをむやみに定義しない

Modifierクラスをあまり沢山定義し過ぎると、結局どういう使い方をすべきモジュールなのかわからなくなりがちです。
はっきりとした判断基準はありませんが、私は以下に挙げる条件のうち1つ以上に当てはまるときはModifierを定義することが多いです。

2-1. Modifierクラス名を見たときにどういう変化が起こるのか想像しやすい場合
2-2. 元となるモジュールが少ない数のタグからなるシンプルなモジュールの場合
2-3. JSで付けたり外したりすることが想定される場合

今回のmod-heading-0001では、1と2が当てはまります。

2-1については、自分以外の誰が見てもわかりやすいか。数ヶ月後の自分が見てもわかりやすいか。ということも考えてみると良いでしょう。

2-2については、今回は1つのタグだけで構成されるモジュールで、非常にシンプルなものになっていることがわかると思います。

2-3については、今回は当てはまりませんが、Webページの制作において頻繁に登場するパターンであることがわかると思います。

3. margin-bottomを使用しない

少し強い言葉になりましたが、敢えて「margin-bottomを使用しない」と題しました。
無計画にmargin-bottomを使用すると後から邪魔になるということが頻繁に起こりますが、「margin-bottomを使用しない」と決めることで、上下のmarginの制御はとても容易なものになります。

今回mod-heading-0001でmargin-bottomについて触れたのは、見出しモジュールはmargin-bottomを設定すると便利なモジュールの代表例だからです。

見出しモジュールは複数箇所で繰り返し使用されますが、用途がとても限定的で規則的に使用されます。

例えばあるWebサイトのデザインのルールとして「lv-2の見出しの下にはどんな要素が配置されても原則として20pxの余白を設ける」というルールを設定してデザインしている場合は、予めmargin-bottom: 20px;を設定しておくと、見出しの下に配置する要素にmargin-top: 20px;をその都度設定するよりも手間が少なく済みます。
デザイン担当者とマークアップ担当者が分かれている場合は、マークアップ担当者の方から声をかけて認識合わせをきちんとするのが良いでしょう。

ただ私の経験上では、長期間の運用を続けていくとデザイナーが当初想定していたルールから外れたイレギュラーが発生することはよくあります。

そんなときは、margin-bottom: 0; にするModifierクラスを定義すれば良いと思いますが、至る所にこのようなModifierクラスを定義して、付与していくとコードが煩雑になる要因となります。

より易しいCSS設計を紹介する意味で「margin-bottomを使用しない」と題しましたが、少し高度なCSS設計をするという意味では「margin-bottomはむやみに使用せず、計画的に使用する」ということになります。

少し説明が長くなって話がぶれてしまいましたが、ぜひ「margin-bottomを使用しない」方法を使用してみてください。

4.lv-1〜lv-6のクラスはh1〜h6タグに必ずしも付与するわけではない

今回lv-1〜lv-6までのクラスを定義しましたが、これらはh1〜h6タグに使用するクラスと決まっているわけではなく、以下のようにdivに付与したり、h1にmod-heading-0001--lv-6を付与したりすることも想定しています。

1
2
<div class="mod-heading-0001 mod-heading-0001--lv-6">見出し lv6</div>
<h1 class="mod-heading-0001 mod-heading-0001--lv-6">見出し lv6</h1>

クラス名はあくまでも見た目を表しています。

もちろんh1〜h6タグの見出しレベルに合わせて付与しても大丈夫です。

続きはこちら

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