ID や Class の命名規則

デザインがしっかりしていてメジャーかなと思われるサイトの ID や Class の命名規則を調べてみました。

パスカルケース

可読性が高い反面、大文字と小文字を使うのでタイプミスによるバグが出やすくなるかもしれません。

例 : HeaderMenu

• 2-U : トゥーユー

キャメルケース

JavaScript などプログラムで良く使用する命名規則なのでプログラマーの方が選ぶ傾向にあるようです。パスカルケースと同様、大文字と小文字を使うのでタイプミスによるバグが出やすくなるかもしれません。

例 : headerMenu

• 無印良品

スネークケース

アンダースコア(アンダーライン)で単語が分かれるので、可読性は高いです。また、小文字しか使用しないのでタイプミスも起こりにくいです。ただし、一部の古いブラウザ(IE4やNN4など)では未対応です。

例 : header_menu

ハイフン (-)

ハイフンで単語が分かれるので、可読性は高いです。また、小文字しか使用しないのでタイプミスも起こりにくいです。デザイナーが選ぶ傾向にあるようです。ただし、ハイフンはプログラムでは減算演算子になるので、プログラムと連携する際は若干の注意が必要かもしれません。

例 : header-menu

• Mozilla Project
• WordPress

すべて小文字

単語が分かれないので可読性は低いです。ただし、小文字しか使用しないのでタイプミスは起こりにくいです。

例 : headermenu

• Apple Inc.

みなさんは、どんな命名規則を使用していますか？また、他に掲載すべきサイトの ID や Class の命名規則があればコメントください。