CSSデザインノートでタグ「Naming Conventions」が付けられているもの

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

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

  • アンダーバー(_)でつなぐ
  • ハイフン(-)でつなぐ
  • キャメルケースを使う
  • 単語を全て小文字でつなぐ

1.アンダーバー(_)でつなぐ

例:main_contents

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

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

2.ハイフン(-)でつなぐ

例:main-contents

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

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

3.キャメルケースを使う

例:mainContents

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

4.単語を全て小文字でつなぐ

例:maincontents

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

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

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

id名やclass名を考えるのは結構億劫ですよね。だからつい適当に思いつきで命名しがちです。しかし、後々のメンテナンスや他の人がソースコードを変更することを考えると、id名やclass名は慎重に決めましょう。

例えば、強調のstrongタグで囲んだテキストを赤くしたいときを考えます。安易に

CSSコード

strong .red {
   color:red;
}

にしてしまうと、後々に赤色でなくて緑色に変更しなければなくなったとき、redというclass名は非常に不適切になってしまいます。

よって、色でclass名を決めるのではなく、機能でclass名を決めるべきです。機能という面では「強調」ですが、strongにはすでにその意味は含まれているので、二重に命名することに意味はありません。そのような場合は、囲んでいるテキストの中身で命名します。

例えば、

(X)HTMLコード

strongタグの使用は<strong class="seo">SEO</strong>に効果的です。

のように命名するのもひとつの手です。

しかしながら、色が赤であることが重要ならば、そういう機能としてclassを指定するのなら、「class="red"」という命名も正しくはあります。このあたりは、ケースバイケースになりますね。

また、マークアップには直接関係しない要素、例えばワイヤーフレームのためのdiv要素などには役割的な名前をつけるべきです。

ヘッダー部分を囲むdiv要素には「<div id="header">」、メインコンテンツを囲むdiv要素には「<div id="mainContents">」といった具合です。

こうすることで、CSSだけを見てもどのようなHTMLタグの指定なのかよくわかり、メンテナンスもしやすくなります。

最近のブログ記事