効率的なCSS設計の基本「基本、HTMLの要素名にスタイルを指定しない」

CSSは、簡単に書けるメリットがある一方、非常に破綻しやすいデメリットもあります。
保守性が高まる、CSS設計の代表例をメモします。

HTMLの要素名にスタイルを指定しない

リリース後や改修後も、後から部分的な変更や、ブラウザやサイトの仕様変更によってHTMLのマークアップが変更される場合があります。
そんな時、HTMLの要素名にスタイルを指定していると、CSSファイルも修正しなくてはいけません。

例えば、こんなコードがあるとして

See the Pen oLPmaq by r.shimizu (@r_shimizu) on CodePen.

サンプルタイトルより、重要なタイトルがあるとすると、サンプルタイトルはh2に格下げする必要があります。その場合、CSSのセレクタも変更しなくてはいけません。

See the Pen YWOBRj by r.shimizu (@r_shimizu) on CodePen.

でも、HTMLの要素名ではなく、クラスに対してスタイルを指定していればHTMLに多少の変更があっても、CSSがその影響を受けにくくなるので保守性が上がります。

See the Pen OXodYZ by r.shimizu (@r_shimizu) on CodePen.

See the Pen YWOBRj by r.shimizu (@r_shimizu) on CodePen.

ただ、a要素、input要素、textarea要素など「その要素でないと機能が成り立たない」場合は要素の種類が変わる可能性が低いため、要素名に直接スタイルを指定するデメリットが薄くなります。