こんにちは、すず(@suzublog23)です。
[voice icon=”https://suzublog.site/wp-content/uploads/2020/01/nayamu_girl2-2-e1579170514839.png” name=”プログラミング初心者” type=”l”]
最近はあまりidセレクタを使わないって聞いたんだけど・・・何で?
[/voice]
CSS設計には”idセレクタ”と”classセレクタ”がありますが、現在ほとんどidは使われておりません。
今回はその理由についてまとめましたので展開します。
idセレクタを使わない理由
[box class=”blue_box”]
汎用性が低い
idはclassで上書きできない
idとclassが混在すると見づらい
[/box]
具体的に解説します。
汎用性が低い
idセレクタはページ内で1回しか使えません。classと違って再利用ができないので、汎用性が低いです。
idはclassで上書きできない
CSSは基本的に、下記の優先順位で適用されます。
[box class=”blue_box”]
1.!important
2.inline
3.id
4.class
5.element(要素)
6.universal(全称セレクタ)
[/box]
優先順位のとおり、idで定義したものをclassで上書きすることはできません。
なので、初めからすべてclassで定義すれば、無駄なことを考える必要がなくなるのでオススメです。
idとclassが混在すると見づらい
そもそも、idとclassが混在すると見づらい・分かりづらいという問題があります。
結論:idは不要、classで十分
「idセレクタじゃないとダメ」というパターンはあまりないかなと思うので、基本的に使わなくてよいかと。
すべてclassで指定してしまえば、汎用性が高く、idと混在して見づらいということもないし、CSSの適用優先順位も考えなくてよいので非常にオススメです。
本日も一緒に勉強を積み上げていきましょう!