余白の設計を考える②

最上位に配置されるBlockのmarginをどうするか？

①親セクションのElementとする

1つ目の方法は、「親BlockのElementにmarginを付ける」という原則をセクションの直下の大きなBlockに対しても厳密に適用するという方法。
この方法は他のBlockと共通したルールで適用できるため、迷いが少なく、1つ1つの余白自体をデザインに合わせて高度にカスタマイズできるメリットがある。しかし、セクション直下のBlock同士の余白パターンが多数ある場合はBlock名／Element名を変えるか、Modifierを付けるかするなど、やや設計に手間がかかるのが難点である。

<section class="section">
　<h2 class="heading-lv2">大見出しテキスト</h2>
　<p>この文章はダミーです。</p>
　<div class="pickup section__item">
　　<div class="pickup__card">～</div>
　</div>
</section>
/* 下層セクション */
.section__item {
　margin-top: 50px;
}

②ユーティリティclassで余白を付ける

2つ目の方法は、余白専用のユーティリティclassで指定する方法。
あらかじめ用意しておいた余白専用のclassでその都度必要な余白サイズを付ければ良いので、分かりやすいのが最大のメリットである。BEMは本来ユーティリティの利用は想定していないが、コンテキストから余白サイズが決定できず任意にBlock同士のmarginを決めたい場合ではやはりこの方法が便利なのは確かである。
ただし、レスポンシブのデザインではPCレイアウトとSPレイアウトで余白サイズが異なるケースというのはよくあること（むしろその方が多い）なので、様々なパターンに対応できるよう、ユーティリティclassをあらかじめかなり充実させておく必要がある。

<section class="section">
　<h2 class="heading-lv2">大見出しテキスト</h2>
　<p>この文章はダミーです。</p>
　<div class="pickup u-mt50">
　　<div class="pickup__card">～</div>
　</div>
</section>
.u-mt0 {margin-top: 0 !important;}
.u-mt10 {margin-top: 10px !important;}
.u-mt20 {margin-top: 20px !important;}
.u-mt30 {margin-top: 30px !important;}
.u-mt40 {margin-top: 40px !important;}
.u-mt50 {margin-top: 50px !important;}

③margin専用のdivで囲む

コンテンツとレイアウトを分離し、Blockの独立性・流用性を最大限確保することを重視するのであれば、子Blockに直接余白コントロール用のclassを付与するのではなく、必ずmargin専用のdivを追加してそちらに余白を指定することを徹底する手法もある。
このようにするとdivの入れ子が深くなるため、HTMLは複雑になるが、Block自身の独立性を最大限維持することが可能。ただしそのことで得られる実務上のメリットは、「Blockのコードをそっくりそのまま別のところで流用できる」という点にあるので、案件の特性によってはその恩恵をほとんど得られないこともある。

<section class="section">
　<h2 class="heading-lv2">大見出しテキスト</h2>
　<p>この文章はダミーです。</p>
　<div class="u-mt50">  <!-- 余白専用div -->
　　<div class="pickup">
　　　<div class="pickup__card">～</div>
　　</div>
　</div>
</section>

④Block自身にmarginを付ける

最も大きな粒度のコンポーネントに限ってBlock自身に固有のmarginを付けるという方法。marginルールに反するやり方ではあるが、大きな粒度のBlockを他で流用することがほぼないことが分かっている場合には最も手軽なやり方となる。
各ページ各セクションがほぼ固有の独自Blockで構成されており、ページをまたいで流用されるBlockがあっても基本的に全て同じレイアウトで同じ場所に配置される（コンテンツとレイアウトが常に一体化している）ことがあらかじめ分かっている場合、Block自身にmarginを付けることで問題が生じることは実はほとんどない。

  • LPなどのペライチで構成されている場合
  • ほぼ全てがページ固有のコンテンツであり、かつコンテンツごとに固有のレイアウト・余白を持たせる前提で作られている場合

このような事案であれば少なくともセクション直下に配置されるBlockに関してはBlockに直接marginを付けても許容範囲であると思われる。

<section class="section">
　<h2 class="heading-lv2">大見出しテキスト</h2>
　<p>この文章はダミーです。</p>
　<div class="pickup">
　　<div class="pickup__card">～</div>
　</div>
</section>
.pickup {
　margin-top: 50px; 
}
inserted by FC2 system