複数ページでのidとclassの使い分け

質問

.
よくある、id と class の使い分けについてですが、複数ページに共通して存在するようなレイアウトに対する考え方についてです。

今まで、一つのページ内に一つだけ存在するものに対しては id を割り振り、一つのページに共通して存在するものに対してのみ class を割り振ってきました。ですので、class より id をベースにコーディングしていたという感じです。

ただ、最近、ページが増えるたびにどうもソースがなんとなく見にくく、メンテナンスに不効率な感じがしてます。特に、複数ページに共通したレイアウトがある場合です。

一つのページ内に共通して存在するものに対してのみ class を割り振り、その他は全てidを割り振るという考え方を貫くと、同一ページには同じレイアウトは存在しないが他の複数のページには同じレイアウトが存在しているような場合にも、基本的にその複数ページのどのページにもその共通したレイアウトに関して共通した id を割り振ることになってしまいます。

しかし、メンテナンス性を考えると、このような場合も基本的に class を割り振り、複数ページの内のあるページだけ少しデザインを変えるようなときだけ id を割り振る、といった使い方のほうがソースが見やすくすっきりするような感じがします。

ですので、最初から claas を割り振ることをベースとして、全ページを通じてそのレイアウトが固有のものになりそうな場合にだけ id にする、または、後から固有のものになった部分にだけclassに加えて後からidも付与する、というようなシンプルなコーディングに転換したいと考えてます。
しかし、この方法ですと、他のページには同じレイアウトが存在するとはいえ同一ページにはそのレイアウトが1つだけしか存在しないにもかかわらずidでなくclassを付与してしまう場面が増大してしまい、原則論から考えると若干気にはなってしまいます。(ひょっとすると私の原則論のとらえ方がそもそも間違っているのかもしれません)

このあたり、どう考えたらよろしいでしょうか?
何かかいろいろなご意見や考え方を頂けますとうれしいです。
.

回答No.1

dezimac

IDは、全ページで絶対に共通する要素設定するといいです。
単純な例だと
・見出し領域： <div id="header">～</div>
・本文領域： <div id="main">～</div>
・下部領域： <div id="footer">～</div>
こうすると、CSSファイルを編集するだけで全ページの共通レイアウトを一気に変更できます。

cssも
#hearder p.class{~}
とかすると管理しやすいでしょう。

また、装飾とかよりも、ページ内リンクを作るときにも役立ちます。
リンクを貼る際には<a href="#header"見出しへ</a>

IDとClassは重複して指定もできるので、
<div id="main" class="hoge">
とかも可能。
原則として、IDの内容が優先されます。

IDはページ内リンク用と割り切って装飾は一切しないで（＝cssの記述は無し）、classでだけで装飾する方法もあります。

やり方なんて人それぞれで、10人いれば10通りの記述がありますから、自分で管理しやすいように試行錯誤してみて下さい。

https://tech-camp.in/note/technology/17542/#id
https://allabout.co.jp/gm/gc/23897/

参考URL：

https://allabout.co.jp/gm/gc/23897/

お礼

丁寧にありがとうございます。
ネット上でもいろんな意見が見られ、あらためて最近迷い始めてしまっていたのですが、仕様書・メンテナンス性・idやclassの言葉としての本来の意味・個々のページデザインの状況・好み、などなど、もう少し考えて見ます。
特に複数ページに存在して似たようなデザインになっているtable(会社情報と特定商取引法表示など)やブログ記事の中身のデザインなどについてです。
とても参考になり感謝しております。