
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の役割を明確化し、ソースコードを読む際に理解速度を早めることが出来ます。
この続きをみるには
この続き:
1,919文字
記事を購入
100円
この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
気軽にクリエイターの支援と、記事のオススメができます!