こちらの記事は初学者でありがちな
「HTMLでつかえる<class>や<id>をつけるというのはわかったけど、実際どうつけていこう？」
「classにすべき？idにすべき？」
などの疑問が解決するようになる記事になります。
あくまで個人的にこうした方がいいと思った内容になりますので、これが正解ではないということだけは頭に入れて頂きながらご覧いただければと思います。
まだHTMLのマークアップをしっかりできない方はこちらもご覧ください。
class、idは全ての要素につけるべき？
先に答えを申し上げると答えはNoです。
例えば<div class=”conatainer”>の要素内にul要素が2つ以上あったりするとulに対してもclass名をつけてもいいかなと思うのですが、1つしかないなら
「.container ul」
とすれば指定できるのでつけなくて大丈夫です。
何より全てにclass名をつけるとなると初心者のうちは名前をどうつけようか迷いますし、
cssファイルを見た時に全てclass名などの指定だと、一体なんの要素に対しての指定なのか分かりづらくなります。
例えばこんな感じなら最後に「img」や「li」とついていれば
「画像とリストに対してのスタイルか」
と一目瞭然です。
class？id？どちらにするか
まずは結論から申し上げると、idはページ内の飛びたい項目に移動させる為に使えるのですがそれ以外は基本使わなくても大丈夫かと思います。
（例えばこの記事の上に目次があるのですが、見たい項目を押せばそこまで自動スクロールされるそれのことです）
強いてす使うとするならば<body>、<header>、<nav>タグぐらいでしょうか？
なぜ使わなくていいのかというとidは優先度がかなり高くなってしまうからです。
ここでまず考えるべきことは、cssでの指定の仕方に点数という概念があることです。
| セレクタの種類 | 例 | 点数 |
|---|---|---|
| ユニバーサルセレクタ | * | 0 |
| 要素名 | p,divなど | 1 |
| 擬似要素 | :nth-child( )など | 1 |
| 属性セレクタ | a[href=”◯◯.com”]など | 10 |
| classセレクタ | .containerなど | 10 |
| idセレクタ | #headerなど | 100 |
| 要素に直接 | style=”color: red;” | 1000 |
上記の表の通り、できる限りclass名のみで指定すれば、少し点数を増やせば上書きしたいスタイルの点数を超えられるのでいいのですが、idで指定をするとその点数を超える為にまた別のidを設定する必要があったりします。
何が言いたいかというと、cssで指定する場合は出来るだけ点数が低い状態で最低限のclassと要素指定で最初は指定するといいということです。
高い点数で指定し続けると、デメリットとして
- cssファイルの文字数が増えるのでデータ容量が増える
- レスポンシブ化（スマホ用に表示の仕方を変えること）するときに最初に詳細に指定しすぎると、上書きするときに面倒
- 後の変更、メンテナンスなどの時に見ないといけない文字数が多く大変
などがあります。
ですのでできるだけclass名の指定だけで収め、id指定はどうしても優先度を上げたい時の最終手段まで使わない方がいいかなと思います。
よく使う項目や使い回すアニメーションなどはclass名を決めておくと便利
style.cssファイルややリセット用のcssファイルに例えば
.animation {自分のつけたいアニメーションスタイル}とした上で、
<div class=”animation”>
としておけば同じアニメーションをつけたい要素に <◯◯ class=”animation”>とするだけで全てに
アニメーションを使い回すことができます。
アニメーションの他にも、クリックをしたらメニューがでてくるなどもjQueryと組み合わせることで
同じクラス名を付ければ再度スタイルを記述する手間も省けます。
普段から自分のよく使うスタイル、もしくは特定のサイトを作成する上でよく使うスタイルは決めてしまって、適用したい要素にclass名を追加するだけという風にすると管理もしやすくなりますし、時短にもなるのでお勧めです。
まとめ
いかがでしたでしたでしょうか？
プログラミング初心者では最初によく悩むことかなと思います。
最初は記事のようにclassやidをつけて頂き、慣れてきたら自分でやりやすいようにアレンジして頂ければと思います。
