어려운 일은 없지만 피하는 것이 더 편해지는 CSS를 작성하는 방법

이것은 무엇입니까?

이 스타일을 결합한다고 가정

있을 것 같은 마크업의 예

예 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>

예제 1에서는 문제가 없지만 예제 2에서는 피하는 것이 좋습니다.

h2 {
  margin-top: 32px;
}

반대로 예 2에서 좋은 CSS

div {
  margin-top: 32px;
}

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

차이점은?

즉?

요약