ダメなことはないけど避けた方が楽になるCSSの書き方

これはなに

• CSSでマージンをつける際、気をつけると後からちょっと楽になるかもしれないTips記事です
  • 記事を書くために使ったコードはここに置いてあります

このスタイルを組むとする

ありそうなマークアップの例（若干はしょってる）

例1：各要素をフラットに書いている

<h1>このページのタイトル</h1>

<h2>ちょっと強調したテキスト</h2>
<p>なにかしら文章が書いてある。以下はダミーテキスト。</p>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
<p>この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>

<h2>またもや強調したテキスト</h2>
<p>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
<p>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</p>
<p>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。</p>

例2：タイトル以下のコンテンツをdivでwrapしている

<h1>このページのタイトル</h1>

<div>
  <h2>ちょっと強調したテキスト</h2>
  <p>なにかしら文章が書いてある。以下はダミーテキスト。</p>
  <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
  <p>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
  <p>この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>

  <h2>またもや強調したテキスト</h2>
  <p>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
  <p>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</p>
  <p>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。</p>
</div>

• 2つの例の違いは、タイトル以下の文章をdivでwrapしているかそうでないかだけ
• 実際はループ処理やレスポンシブの都合などでもwrapする・しないは変わると思うので、どちらが良い悪いの話はしない

例1では問題ないけど、例2では避けた方が良いCSS

※記事を書く都合上タグセレクタで説明していますが、良い感じのクラスが定義されているつもりで読んでください

bad.css

h2 {
  margin-top: 32px;
}

• 「2つの強調されているテキストの上には同じだけの余白があるから、それぞれにマージンをつけた」状態

逆に、例2において良いCSS

good.css

div {
  margin-top: 32px;
}

h2:not(:first-of-type) {
  margin-top: 32px;
}

• 「wrapしているdivにmargin-topをつけたのと、2番目以降のh2にmargin-topをつけた」状態

違いは？

例2をdevツールで見てみましょう

	bad.css	good.css
sectionを選択している状態
h2を選択している状態

• bad.cssで起こっていること
  • h2と、wrapしたdivの間には間違いなく余白が存在する
  • しかし、divは何も余白を示さない
  • 1つ下の階層にあるh2が、wrapしたdivを突き抜けて余白を生み出している
• good.cssで起こっていること
  • h2と、wrapしたdivの間にはmarginが示されている
  • 1つ下の階層にあるh2はmarginをもたない

つまり？

• 1箇所存在するくらいなら別に問題ない
  • レイアウト自体は正しくできる
• 複数箇所になると「何故か想定しているより余白が広い」とかが起きがち
  • そしてdevツールで発見しづらい
  • なぜなら、入れ子になっている要素まで見ていかないと視覚的に示されないから
• こういう要素に対してpositionで配置したりし始めると、色々なことが分かりづらくなる

まとめ

• wrapした要素を突き抜けてしまうmargin指定は避けておきましょう
• 今はレイアウト上問題なくても、積もり積もった後にリファクタリングしないといけない場面が来ると大変になりがちです