【CSS設計】今どきidセレクタは使いません / classで十分

css-logo プログラミング

 

こんにちは、すず(@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の適用優先順位も考えなくてよいので非常にオススメです。

本日も一緒に勉強を積み上げていきましょう!

タイトルとURLをコピーしました