適当になることが多いHTMLでのidやclassの定義

時間に追われながら、いくつかのサイトを手掛けていると、意外と煩雑になってしまいがちなのがHTMLとCSSの記述。

とくに、CSSで使うためのidやclassなどは、思いつきで適当なものにしてしまうこともよくあります。

ルール作りからなんて時間が取れない場合も多々あるので、自分の中で最低限の共通ルールを決めておくというのもアリでは。

個人的には、
  • idは単語の先頭のみ大文字
    ex.) IdNameBlock
    ※キャメルケースと言うらしいです
  • idはブロックやカラム単位といった大枠の指定にのみ使う
    (JSで利用する場合は別)
  • classは基本小文字、単語の場合は最初のみ小文字、もしくはハイフンを使用
    ※最初のみ小文字はキャメルノーテーションとも言うそうです
  • CSSでは、idを含めてclassの指定を入れる
    複数箇所で同じclass名があっても影響が抑えられるように
    ex.) #ContentBlock .title {}
  • child擬似クラスが可能なら用いる
    ※IE7,IE8のようなレガシーブラウザは、selectivizr.jsie7-js等JSで対応
  • ブロック毎にタブインデントで見やすくする
    (スペースより入力と視認しやすいからってだけですが)
とまあ大雑把ですが、こんな感じでルール決めをしています。

PHPなどの動的処理やスマホ対応も考えて行くなら、HTMLソース部分は少ない記述で抑えたいところです。

この記事へのコメント


この記事へのトラックバック