Tech Any*Any
Mac や Web のあんなこと、こんなこと。

ID や Class の命名規則

2009/09/01

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

パスカルケース

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

例 : HeaderMenu

キャメルケース

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

例 : headerMenu

スネークケース

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

例 : header_menu

ハイフン (-)

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

例 : header-menu

すべて小文字

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

例 : headermenu

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

コメントする