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

css-logo 【プログラミング】

 

こんにちは、すず(@suzublog23)です。

プログラミング初心者
最近はあまりidセレクタを使わないって聞いたんだけど・・・何で?

 

CSS設計には”idセレクタ”と”classセレクタ”がありますが、現在ほとんどidは使われておりません。
今回はその理由についてまとめましたので展開します。

idセレクタを使わない理由

汎用性が低い
idはclassで上書きできない
idとclassが混在すると見づらい

具体的に解説します。

汎用性が低い

idセレクタはページ内で1回しか使えません。classと違って再利用ができないので、汎用性が低いです。

idはclassで上書きできない

CSSは基本的に、下記の優先順位で適用されます。

1.!important
2.inline
3.id
4.class
5.element(要素)
6.universal(全称セレクタ)

優先順位のとおり、idで定義したものをclassで上書きすることはできません
なので、初めからすべてclassで定義すれば、無駄なことを考える必要がなくなるのでオススメです。

idとclassが混在すると見づらい

そもそも、idとclassが混在すると見づらい・分かりづらいという問題があります。

結論:idは不要、classで十分

「idセレクタじゃないとダメ」というパターンはあまりないかなと思うので、基本的に使わなくてよいかと。

すべてclassで指定してしまえば、汎用性が高く、idと混在して見づらいということもないし、CSSの適用優先順位も考えなくてよいので非常にオススメです。

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