はいさい!ちゅらデータぬオースティンやいびーん!
概要
今回の記事は、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
は全て小文字で書くことが一つの慣例になっています。
Good
<div id="alllowercaseletters">Hoge</div>
Bad
<div id="WhatstyleIsthisARGHHHH">Hoge</div>
_
ではなく、-
を使うこと
次は、名前をシンボルで分けたい時に、アンダースコアではなく、ハイフンで分けることです。
Good
<div id="all-lower-case-letters-and-hyphens">Hoge</div>
Bad
<div id="youll_NEVER.UnderstandThis">Hoge</div>
数字を避けて英字を使うこと
こちらの規則は、極力英字[a-z]を使うようにすればいいということです。
そもそも、[0-9]で始まるid
/class
は不正なHTMLでもあるので、ご注意ください。
Good
<div id="section-two">Hoge</div>
Bad
<div id="h3llo_w0rld">Hoge</div>
.
を使わないこと
句読点の.
を使ってspecial.element
のように分けることがありますが、こちらもやはり避けた方がいいです。
なぜなら、JavaScriptでdocument.querySelector
を使うときに、\
でエスケープする必要が生じるからです。
Good
<div id="section-two">Hoge</div>
<script>
document.querySelector("#section-two");
</script>
Bad
<div id="horrible.coding">Hoge</div>
<script>
document.querySelector("#horrible\.coding");
</script>
まとめ
以上、いくつかのid
とclass
の命名慣例とBest Practicesについて紹介しました。
実際、MDN、Vue.js、Reactなど、さまざまな公式ドキュメントを見ても、上記の規則を守って書いています。
上記の慣例を守ることも大事ですが、その上なく重要なのは、プロジェクトで書き方を統一することです。
個人個人の癖に任せるのではなく、Linter、フォーマッターを導入して、チームで書き方を統一することによって、オンボーディングしやすくなるし、迷いなく作業できるので、ぜひぜひコードの書き方についてチームメンバーで話し合って決めましょう!