- Coding Methodology
- 第50回 コーディングガイドライン - id/class の命名規則
第50回 コーディングガイドライン - id/class の命名規則
HTMLコーディングにおいて、idやclass名をどう命名しようか悩む場面は、コーダーならば一度は経験があると思います。
2011年11月に開催した「コーディングガイドライン公開セミナー」においては、「参考になった」「役に立ちそうだ」「明日から使えそう」との反響が最も大きかったテーマは「id/class名」でした。今回はそんな id/class名の命名規則について、解説します。
なぜ命名ルールが必要なのか
画像ファイル等においてもそうですが、そもそもなぜ命名規則が必要なのでしょうか。
多くの場合Webサイトは一度作った後も運用・更新がなされますが、最初の制作者とは別の方が運用・更新担当となるケースが多く、統一したルールのもとに作成されていないと、無規則・煩雑にclass/id名が増加する事となり、更新性が損なわれてしまう恐れがあります。
また、複数名でコーディングにあたる場合や個人でサイトを制作する場合においても、統一されたルールがあれば、命名に迷わずスムーズにページ制作を進めることが出来、作業効率のアップに繋がります。
id/class の命名基本原則
- ・他の制作スタッフ、クライアントが見て分かりやすいものであること。
- ・HTMLの修正をせずにデザインの修正ができるようにすること。
id/classに名前を付けるにあたり重要なことは、誰が見てもそれと分かる、一般的な名前でなければならないということです。より多くの人間がその単語・パーツを容易に連想出来る、一般的な名前である必要があります。
また、意味の分かる範囲で各単語を短く短縮することも、id/class名が長くなり過ぎるのを避けるために有効です。
HTML/CSSの役割として、HTMLは文書構造を表し、CSSはその装飾を担うべきものなので、文書構造とデザインの分離という意味ではマークアップを変更せずともCSSを修正するのみでデザインの変更が出来るよう、変更への柔軟性を持たせることも必要です。
では、どのような命名をすれば、HTMLの修正をせずにデザイン修正ができるのかを見ていきましょう。
id/class の命名規則
- ・文書構造上、意味のある名前にすること。
- ・ローワーキャメルケースで命名すること。
id/class名にはデザイン上の意味ではなく、「文書構造上の意味」を持たせることが望ましいでしょう。見た目を反映させた名前や無意味な文字列ではなく、スタイルを適用する箇所がそのページにおいてどのような役割・目的を持った箇所なのかを反映させると、装飾に依存しないid/class名となります。
例えば、図1・図2のような場合、見た目を反映させた命名をしているとレイアウトや色が変更になった時には、HTML側の変更も発生してしまいます。
※アイコン付きリストのバリエーションなど、見た目そのものの意味を重視する場合は例外とします。
また、単語はどのように繋げるかですが、ここではローワーキャメルケースという、先頭を小文字から始め、二単語目以降の単語の先頭のみ大文字とする記法をとります。他にもハイフン「-」やアンダースコア「_」で繋げる記法もありますが、大事なのはコーダー間でひとつのルールに統一するということです。
class の命名規則
- ・末尾に2桁の連番を付ける。
classの命名においては、スタイルのバリエーションだということを分かりやすくするため末尾に2桁の連番を付けます。後からデザインが追加・変更される可能性を考慮し、現状１パターンしか見受けられないパーツにおいても、～01と必ず2桁の連番を付与するルールとしています。
バリエーションがある特定パーツのclass命名規則
- ・[タグ名] + ["_"] + [識別名] + [連番] ( + ["_"] + [詳細] )
<ul>, <dl>,<ol>,<table>,<hx>などの特定のタグで使用するclassかつ、バリエーションがあるパーツの命名は、Dreamweaverのコードヒントを利用するために上記のように、識別名と詳細をアンダースコアで連結します。(右図 例参照)
命名ルールを統一することは、id/class名に迷う時間が削れるだけでなく、Webサイトのメンテナンス性の向上にも繋がります。
