HTMLのidとclassのデザインパターン

はじめに

マークアップを行う際には適切なタグ使用はもちろんのこと、idやclassを使いCSSでレイアウトを組んでいきます。

idやclassはCSSだけでなくJavaScriptで要素を取得したり挿入、あるいはCSSや内容を書き換えたりすることは普通に行われます。
さて、こんな経験をしたことはありませんか？

- JavaScriptであるクラスを利用したら、別ページの同名クラスでエラーや意図しない動きをした
- CSSで `#foo .bar` と限定してしまったがために他のページの同一レイアウトにしようとした箇所で使えなかった
などなど

HTML/CSS/JavaScriptでタグやid、class名は密接な関係にあるのでこういうことに出くわします。

それを解決しようとBEMだのOOCSSだのSMACSSといったCSS設計を安易に取り入れようとしたりする人もいたりするのですが、そもそも根本部分でのデザインパターンを作ろうとしなければ破綻することも多いです。

今回はそういった根本的にidやclassをどうデザインするのかということを書きます。
根本部分のCSS設計を行うことでidとclassの役割を明確化し、ソースコードを読む際に理解速度を早めることが出来ます。