HTMLのidとclassでいい名前をつけるテクニック

HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。

How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次の3つの質問を自分に投げかけるという。

1. 対象となる要素の機能はなにか、なぜそこに配置されているのか、その目的はなにか。
2. ほかに同じような要素はあるか、どの程度似ているのか、どういった違いがあるのか。
3. 同じ目的で要素を使っているサイトはあるか、そうしたサイトではどのような名前になっているのか。

この質問に答えることで、次のような効果が得られるという。

• 1つめの質問への答え: idやclassの名前を読むだけで何をするものか理解できるようになる。
• 2つめの質問への答え: より適した名前になる。例えば最初はnavigationで考えていたとして、他にもナビゲーション目的の要素があることに気がつければ、sitenavigationのようによりその要素にとって適切な名前を見つけることができる。
• 3つめの質問への答え: ほかの技術との相互交換性が高まるとともに、すでに実施された経験の効果を得ることができる。たとえばnavigationという名前はHTML5でnavが使われているように、sitenavと書いたほうがいいのではないか、といった判断ができる。

名前の記述規則も紹介されている。How To Compose HTML ID and Class Names like a Rockstarで紹介している規則は次のとおり。

• サイト全体に渡って使われるものに対しては「TitleCase」のように大文字区切りの名前をつける。
• そのサイト限定のものに対しては「lower-case-dashed」のようにハイフン区切りの小文字で名前をつける。
• idとclassの組み合わせで「TitleCase」と「lower-case-dashed」が組み合わさるケースがあってもいい。たとえば「class="SearchField" id="widgetco-search"」のように。

命名した名前の妥当性をチェックする方法としては、「その要素を文章だと思って音読する」という方法が紹介されている。実際に自分の耳で聴いてみると、その名前が妥当なものであるかひどいものであるかがわかってくるという。

一瞥しただけでその要素が何をするものかがわかるidやclassの名前をつけることができると、保守性が向上するとともに、他のプログラマやデザイナとの意思疎通がとりやすくなる。命名にはさまざまな方法があるがHow To Compose HTML ID and Class Names like a Rockstarで紹介されているテクニックはそういったテクニックの中でも基本となるテクニックとして参考になる。