こんにちは!今日はCSSのセレクタにおいてidをなくしてclassだけにするとどうなるのかって話です。

長所

楽

htmlなら <div class=' まで、Pugなら div. までは頭空っぽにして書けるので頭に優しいです。

「これidのほうがいいかな?」ってならないのがいい。初心者の人に説明するときも楽ちんかも?

スタイルの優先順位を気にしなくていい

例えば赤いりんごがあったとします。こんな風に

<div id='red-apple'>
  りんご
</div>

#red-apple{
  color: red;
}

これに後からclass='blue-apple'を付与してスタイルを変えようとしても...

<div id='red-apple' class='blue-apple'>
  りんご
</div>

#red-apple{
  color: red;
}
.blue-apple{
  color: blue;
}

りんごは赤いまま。なぜって?CSSにおいてはidがclassより優先されるから...

スタイルの優先順位

仕様なんです。あまりにも謎仕様ですが、おそらくWebがテキストだった昔の名残? OOCSSとかだとこの仕様は特に不自由です。

でもidを使わなければこんな問題も起こりえないです:)りんごもclassならちゃんと青いよ。

<div class='red-apple blue-apple'>
  りんご
</div>

.red-apple{
  color: red;
}
.blue-apple{
  color: blue;
}

ちなみにcssではプロパティがダブった場合はcssファイルで下に書いてあるものが優先されます。

1つのタグに2つ以上付けられない

idは1つまで。

短所

遅くなる

classよりidの方が速いらしいです。

classとIDの速度比較

まあidは1個見つければ捜査終わるって考えたら妥当ですかね!

ただ微々たる差のような気もするわ。

スタイルが単独であることを明示できない

実質的な短所はこっちかな?

classはいくつ使っているか明示する方法がなく、特に大規模化するとその欠点は顕著に表れます:(

classは一度書くと安全に消せないんですよねーー

idは常に1つなのでこの点は安心!消したくなったら同じid見つけて消して終わり。

使い分けについて

**1つしかないのもにはid、2つ以上のものはclass!**ってのが通説ですね! 概ねその通りかと思います。

私が書く時は基本的に<header>、<footer>、<nav>、<div id='root'>の4つにだけidを使います。

どれも2つ以上あることは基本的にありえないし、動的なスタイルを充てる機会もなさそうですしねー

というわけでidとclassの話でした:)大切な人はid、大切な人との思い出はclassですね<3<3<3