開発効率・メンテナンス効率のいいCSSの設計思想とは_2
破綻しやすいCSS(その1)「HTMLの構造に依存している」
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を使ったマークアップであれば、
もし、
- HTMLのarticleタグをdivに
- h1タグをh2に
変更しても、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; }