id名やclass名に命名規則をつける

2009年4月30日 07:40 | 個別ページ

id名やclass名をつけるとき、あなたはどのように命名していますか？

日本語（2バイト文字）が使えないので英単語を使うのが一般的になっていますね。問題は英単語を2つ以上くっつけた名前にしたいとき、英単語の連結をどのように表現するか？以下の4つの方法が思いつきます。

例：main_contents

アンダーバー（アンダースコア）を利用すると、エディタでCSSを編集する際、ダブルクリックで選択できるので重宝します。しかし、IE5.5以前のような古いブラウザでは不具合を起こすことがあると言われています。

しかしながら、そこまで古いブラウザだとアンダーバー以外にも不具合が出そうなので、IE5.5以前にはスタイルシートを適用しないようにするのも手かもしれません。

例：main-contents

アンダーバーでは一部ブラウザで不具合が出ることからハイフンを使用する人も多いですね。エディタではダブルクリックで選択できないのですが、それがよいので使っている方もいるようです。

こころなしか、CSSerというかマークアップエンジニアの方とかこの書き方多い気がします。

例：mainContents

キャメルケース(CamelCase)とは2番目以降の英単語の最初の文字を大文字で表す記法です。他のプログラミングなどやっていると馴染み深いですよね。

例：maincontents

英単語を全て小文字で書いて、区切りもないというパターンです。可読性が落ちてしまうのであまりお勧めできない記法ですね。

どの書き方でも問題はないと思いますが、CSSファイル内では統一させたほうがメンテナンスなどにはよいと思います。

ちなみに私は、CSSを始めた当初はアンダーバー派だったのですが、Javaをやるようになってキャメルケース派になりました。これだとブラウザのことも気にしないでいいし、可読性もなかなかよいです。何よりダブルクリックで選択できるのが嬉しい。