見出し画像

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の役割を明確化し、ソースコードを読む際に理解速度を早めることが出来ます。

この続きをみるには

この続き: 2,077文字

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

Nobuyuki Kondo

100円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
また読んでね
3
WEB系エンジニアの端くれ。フロントエンドメインでたまにバックエンドもやります。

こちらでもピックアップされています

エンジニアのためのデザイン
エンジニアのためのデザイン
  • 2本
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。