nishiaki id名、class名の最近の自分の傾向｜CSS Happy LifeやClass名とID名の命名規則(2) | Blog hamashun.comを真似て自分のためにも書いてみよう。
idとclassの使い分け
idを使うところ
- ワイヤーフレームでパーツが決まってる部分（インターフェイス名とかコンテナ名とか）
- HTMLファイル対CSSファイルが1対1の関係でない場合に、ページを判別させる場合
上記以外ではclassを使う。
サイトの規模が大きければ大きい程、class名がかぶったりする可能性が高くなると思うんだけど、class名を考える時間ももったいない訳で。
class名がかぶっても良いように、css側のセレクタは、パーツのidから記載するようにしているな。
あんまり子孫セレクタ長過ぎるのもどうかと思いますから、先にインターフェイス名とかコンテナ名を決める事が重要ですよね。
命名規則
最近の案件だと、@importとか使って、古いブラウザには、css読み込ませない。という手法が主流だと勝手に思ってますが、その場合だと、大文字小文字、アンダースコア、ハイフンも使える訳でして。そうなると選択肢も多いですよね。選択肢が多いということは、プログラム側とhtml側で使い分けすることも可能ですよね。
例えば、プログラム側はラクダ型でhtml側はハイフン型使うとか。
何にも制約がなければ、個人的には、ラクダ型が一番好きかも。
理由は、htmlファイルをガーッと見た場合に、クラス名とか見つけやすいような気がするんですよね。
ファイル名には、アンダースコア使 ってるでしょ？他のタグや属性も小文字でしょ？そんだけなんですけどね。
あと、id、class名に見た目の意味より役割の意味を付けた方がいいというのも、よくわかりますが、やはり誰が管理／更新するのかが重要で、その人がわかりにくかったらダメだと考えてます。