開発効率・メンテナンス効率のいいCSSの設計思想とは_2

HTMLの変更と、それに合わせてCSSも変更になる場合。

MTHL

<article>
  <h1>Title</h1>
  <div>
    <p>article</p>
  </div>
</article>

article h1 {
  border-bottom: 2px solid #000;
  margin-bottom: 1em;
  padding: 10px;
  font-size: 24px;
  font-weight: bold;
}

もし、HTMLのarticleタグをdivに変更する場合、CSSも変更する場合があります。
そのため、あらかじめ次のようなclassを使ったマークアップで

MTHL

<article class="entry">
  <h1 class="entry-title">Title</h1>
  <div class="entry-body">
    <p>article</p>
  </div>
</article>

あわせてCSSも

.entry-title {
  border-bottom: 2px solid #000;
  margin-bottom: 1em;
  padding: 10px;
  font-size: 24px;
  font-weight: bold;
}

HTMLの構造に依存しない、classを使ったマークアップであれば、
もし、

変更しても、CSSを変更する必要がありません。

MTHL

<div class="entry">
  <h2 class="entry-title">Title</h2>
  <div class="entry-body">
    <p>article</p>
  </div>
</div>

CSSは変わりません。

.entry-title {
  border-bottom: 2px solid #000;
  margin-bottom: 1em;
  padding: 10px;
  font-size: 24px;
  font-weight: bold;
}