html､cssコーディングを学習しはじめると必ず最初に覚えるといってもいいid､class｡
「idはひとつだけのとき使う」､「classは複数のとき使う」と覚えると思います｡ほんとうにそれで効率よくコーディングできているでしょうか？
- 目次
cssではclassだけを使う｡
cssで使うセレクタはclassだけと覚えたほうがいいです｡
その理由は以下になります｡
- classは複数で使えるというだけで､ひとつのときに使ってはいけないわけではない｡
- classやidを指定していく段階で､そのあと何回使うかなんてわからない｡
- idを使うと修正､更新が難しくなる｡
classが何回使えるかは決まっていない
classはあくまで「複数(2回以上)でも使える」というだけで「1回のときは絶対使ってはいけない」というわけではありません｡
「2以上で使える」ではなく「1以上で使える」なのです｡
もしidを使って､そのあと同じスタイルがでてきたら…
こうなるとまったく同じスタイルをコピペするか､idをclassに変更しないといけません｡
こんなことになるくらいなら､最初からclassにしておけばこの作業は必要なくなるのではないでしょうか｡
idを使うと修正､更新が難しくなる｡
cssのセレクタには詳細度というものがあります｡
指定したセレクタによってどれを優先するかが決まっています｡
- !important
- インライン記述 (style属性)
- idセレクタ
- classセレクタ ､ 属性セレクタ ､ 疑似セレクタ
- 要素セレクタ (h1､p､div等) ､ 疑似要素 (:before､:after等)
- ユニバーサルセレクタ (*)
- !important
- これは最終手段なので､コーディングではできるかぎり使わなくて済むようにcssを設計してくことが大事です｡
- インライン記述 (style属性)
- htmlに直接スタイルを指定する方法ですが､何段階も上書きするレスポンシブコーディングには向きません｡
昔､パソコンだけを想定してつくったサイトを､スマホ対応する案件をうけるとき､インラインスタイルだらけだと絶望します｡
- 要素セレクタ (h1､p､div等)
- 要素名に直接cssを指定する方法です｡classよりも詳細度が低いので一見こちらのほうがいいように思いますが､サイト内で同じデザインを違う要素にも使いたい場合に融通が効きません｡
- ユニバーサルセレクタ (*)
- 単体で使うことはreset.css以外はほとんどないと思います｡
idはページ内リンク､javascriptで使う｡
cssではclassしか使わないのであれば､idはなんのためにあるのかという疑問もでてきます｡
ページ内リンクはidでしか指定できない
idだけの機能はページ内リンクです｡
通常､ページ遷移のときはページの一番上にへリンクしますが､idを指定してある場合は､ページの途中にリンクします｡
アンカーにこのように書いて
<a href="#link">リンク元</a>
idタグにリンクします｡
<div id="link">リンク先</div>
javascritptではid､classを併用
javascriptではid､classをある程度使い分けたほうがいいと思います｡
cssほど使用頻度がないので､基本はid､複数あるときはclassと使い分けます｡
<button id="js-btn">ボタン</button>
ただ､javascriptでclassを使う場合は､class名に「js-●●」とjavascriptで使用していることがわかるようにし､cssでは別のclass名を同時につけるようにしています｡
<button class="btn js-btn">ボタン</button>
まとめ
パソコンだけのコーディングをしているときであれば､id､classをごちゃまぜで使っていてもいいですが､最近のwebサイトはレスポンシブコーディングが当たり前で､ブレイクポイントでcssを上書きして変更していくことが多くあります｡
idを使うと上書きするには､ほぼ!importantしかなくなってきます｡
html/cssの効率化を考えていくとだんだん限界が見えてきますが､そうやっていろいろ考えていくと次の段階でgulpとかscssとかにたどりついて行くと思います｡
そうなると､コーディングの速度だけでなく､質が上がることにもつながっていきます｡
