Edited at

`id`と`class`の使い分けについて


結論

idはページ内アンカーやJavaScriptで使用するセレクタ名として利用したい時のみ使用し、それ以外はclassという感じです。

単にCSSのスタイルを付けたいときには、idは、一切使いません。


基本的にidを積極的に使わない理由

idを無闇に使うと、classで指定したスタイルを上書きしていまいます。

逆にこの特性を利用してCSSを設計することも可能ですが、たくさんの設計の手法がある中で、私はオススメできません。


詳細度 - CSS: カスケーディングスタイルシート | MDN

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity



JavaScriptで使用するclassid

一方で、JavaScriptで使用するセレクタ名にも、classを利用する時があります。

例えば、同一ページ内で頻出するモーダルウィンドウやアコーディオン等です。

idは同一ページ内で1つしか設定できないので、多くの場面で利用するJavaScriptには使いにくいのです。

逆に、同一ページ内で必ず1回しか使用しない機能に関しては、idで指定すると良いでしょう。

例えば、メガメニューやハンバーガーメニュー、キービジュアルで使用するスライダー等です。

また、"JavaScriptで使用するセレクタ名"として、idを積極的に利用した方が良い理由があります。

それは、JavaScriptの実行速度です。

特にjQueryを使用することの多いWebサイト制作では、状況により3倍近くの処理速度の違いが出ることもあるそうです。

さらに、"idをセレクタ名としてJavaScriptを記述する"ことで、明示的に"その機能はページにひとつしか存在し得ない" ということを表しますので、読みやすいコードになります。

ちなみに、JavaScriptで使用する際のセレクタ名は、接頭辞としてjs-と付けることにより、読みやすいコードになります。

例えば、<div class="js-modal">と記述します。

スタイル調整用ではなくJavaScriptで使用するためのclassだということが、ひと目で分かりますよね。


まとめ

いかがだったでしょうか。

途中からJavaScriptの話が多くなってしまいましたが、概ねこのように使い分けをします。


さいごに

Twitterのフォロワーを募集しております!

すでにWeb業界にいらっしゃる方や、業界未経験の方、どんな方でも募集しておりますので、どうぞよろしくお願いいたします(^^)

Twitter - https://twitter.com/loki__tweet