「id」と「class」結局どちらを使用する?
参考サイト
自分なりにサイトの文章をまとめてみました。
結論:とりあえず「class」を使用する
理由:「id」は優先度の高さが邪魔をする
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐-------------------------------------------------------------
1.「id」は「class」よりCSSの優先度が高い
2.「id」を沢山使用すると、「id」を付けた要素のCSSの要素が高くなり、「id」を付けた要素に対し、CSSを適用する時に反映しにくくなる
↑実際にコードを組んで体験しないとイメージがしにくい
--------------------------------------------------------------------------------------------------
html
<p id="01">←迷う場合classを使う</p>
<p id="02">←迷う場合classを使う</p>
↑同じhtml内にidを使用すると不便になる
#id01{
background-color:#~;
color:white;
font-size: 36px;
}
#id02{
background-color:#~;
color:white;
font-size: 36px;
}
↑2回分のcssコードを入力しないといけない(その分作業量が増える
-----------------------------------------------------------------------------
↓もしもidではなくclassだったらcssをもう一度書く必要が無い
html
<p class="class-only">←迷う場合classを使う</p>
<p class="class-only">←迷う場合classを使う</p>
.class-only{
background-color:#~;
color:white;
font-size: 36px;
}
↑classは1つだけで大丈夫
---------------------------------------------------------------------------------
まとめ
classとidが使われる割合は「9 : 1」まずはclassを使いこなす