結論
idはページ内アンカーやJavaScriptで使用するセレクタ名として利用したい時のみ使用し、それ以外はclassという感じです。
単にCSSのスタイルを付けたいときには、idは、一切使いません。
基本的にidを積極的に使わない理由
idを無闇に使うと、classで指定したスタイルを上書きしていまいます。
逆にこの特性を利用してCSSを設計することも可能ですが、たくさんの設計の手法がある中で、私はオススメできません。
詳細度 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
JavaScriptで使用するclassやid
一方で、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業界にいらっしゃる方や、業界未経験の方、どんな方でも募集しておりますので、どうぞよろしくお願いいたします(^^)