クラス名／ID名の扱い (class / id) [JavaScript]

概要

JavaScript から DOM 要素を扱う際のクラス名及びID名の付け方は、概ね次のような方針に従うことが望ましい。

• クラスは基本的に CSS の適用範囲を絞り込む目的で使用する。
• クラス名において単語はハイフンで繋ぐか、あるいは BEM などの命名規則の適用が推奨される。
• JavaScript ではなるべくクラスセレクタを用いずに、ID セレクタを使用する。
• Ruby on Rails のビューで JavaScript を使うときは、ID名をスネークケースにすると ERB と整合性が取り易い。
• JavaScript 用のクラス名は Trello 式に従って js- プレフィックスを付与すると、デザイナーが不用意に JavaScript 用のクラス名を変更することが防げる。(cf. Trello CSS Guide )
• カスタム data 属性を活用する。

参考：

html の id 属性と class 属性の命名はハイフンか camel か snake か – Qiita

Trello CSS Guide – GitHub Gist

Why are dashes preferred for CSS selectors / HTML attributes? – Stack Overflow

What is the standard naming convention for html/css ids and classes? – Stack Overflow

HTML naming conventions for ID, class and to include element type prefix? – Stack Overflow

id 属性

• 要素の識別子として使われる。
• ドキュメント内で重複してはならない。
• 文法に違反して重複している場合に document.getElementById を使用すると最初の要素が取得される。(※実装に依存する)
• 大文字と小文字は区別される。

参考：

element.id | MDN

Document.getElementById() | MDN

クラス名 (className)

参考：

element.className | MDN

Element.getElementsByClassName() | MDN

data 属性／dataset プロパティ

参考：

HTMLElement.dataset | MDN

data-* | MDN

Using data attributes | MDN

コロン

参考：

: (コロン) を含む id や class のセレクタ | teramako

html 要素の id にコロンを指定するのは注意！ – Qiita

What does a colon mean within an HTML id attribute? – Stack Overflow

Handling a colon in an element ID in a CSS selector – Stack Overflow

Trello CSS Guide

• JavaScript 用のクラス名には js- プレフィックスを付与する。

参考：

Trello CSS Guide – GitHub Gist