HTMLのidとclassに適切な名前をつけるための参考記事

2010年5月31日2010年12月1日

Mainnaviとか決まりきってるやつはいいんだけども、
個別のもので、迷うときありますね。
どうもしっくりこなかったりとか、、
新しく付けたものと元から付いてたやつが、自分の中で整合性とれなくなって
最終間際で付け替えたりとかするときあるwww
なかなか参考になりました。

同記事では次のテクニックが紹介されている。まず、名前を考える段階で次の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」のようにハイフン区切りの小文字で名前をつける。
i・dとclassの組み合わせで「TitleCase」と「lower-case-dashed」が組み合わさるケースがあってもいい。たとえば「class=”SearchField” id=”widgetco-search”」のように。

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

自分的には、以下がかなり大事な要素なんじゃないかと思う。
html5の他にも、JqueryとかのJapascript技術とCSSが組み合わさったものも結構ありますし。