はいさい！ちゅらデータぬオースティンやいびーん!

概要

今回の記事は、HTMLとCSSで使うidとclass属性の命名のベストプラクティス（Best Practices）について解説します。

背景

仕事では、レガシーコードを改修する作業が度々発生しますが、毎度気になることがあります。

それは、HTMLおよびCSSのidとclass属性の名前の付け方です。

どのプロジェクトでも、一貫性のある命名習慣を見た試しがないのです。

<div id="hoge_hoge">と名前をつける人もいれば、<div id="HogeHoge">の人もいるし、<div id="_Hoge">の人もいます。snake_caseやら、camelCaseやら、PascalCaseやら、あるとあらゆるパターンを見てきました。

そこで、今現在2022年において、明確なBest Practice、最善の命名方法はないのかとネットを漁りました。

そうすると、サンマと同じように、獲れはしたが、収穫はそんなになかったのです。

しかし！やはり、コンセンサスのようなものは見つかったので、ここでまとめたいと思いました。

まず、第一の命名規則は以下の通りです。

alllowercaseletters

なんだか暗号みたいですが、idとclassは全て小文字で書くことが一つの慣例になっています。

<div id="alllowercaseletters">Hoge</div>

<div id="WhatstyleIsthisARGHHHH">Hoge</div>

次は、名前をシンボルで分けたい時に、アンダースコアではなく、ハイフンで分けることです。

<div id="all-lower-case-letters-and-hyphens">Hoge</div>

<div id="youll_NEVER.UnderstandThis">Hoge</div>

こちらの規則は、極力英字[a-z]を使うようにすればいいということです。

そもそも、[0-9]で始まるid/classは不正なHTMLでもあるので、ご注意ください。

<div id="section-two">Hoge</div>

<div id="h3llo_w0rld">Hoge</div>

句読点の.を使ってspecial.elementのように分けることがありますが、こちらもやはり避けた方がいいです。

なぜなら、JavaScriptでdocument.querySelectorを使うときに、\でエスケープする必要が生じるからです。

<div id="section-two">Hoge</div>

<script>
 document.querySelector("#section-two");
</script>

<div id="horrible.coding">Hoge</div>

<script>
 document.querySelector("#horrible\.coding");
</script>

以上、いくつかのidとclassの命名慣例とBest Practicesについて紹介しました。

実際、MDN、Vue.js、Reactなど、さまざまな公式ドキュメントを見ても、上記の規則を守って書いています。

上記の慣例を守ることも大事ですが、その上なく重要なのは、プロジェクトで書き方を統一することです。

個人個人の癖に任せるのではなく、Linter、フォーマッターを導入して、チームで書き方を統一することによって、オンボーディングしやすくなるし、迷いなく作業できるので、ぜひぜひコードの書き方についてチームメンバーで話し合って決めましょう！