概要
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を使用すると最初の要素が取得される。(※実装に依存する) - 大文字と小文字は区別される。
こちらのページを参照
参考：
Document.getElementById() | MDN
クラス名 (className)
参考：
Element.getElementsByClassName() | MDN
data 属性／dataset プロパティ
参考：
コロン
参考：
: (コロン) を含む 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-プレフィックスを付与する。
参考：