class 名・id 名
JavaScript から HTML DOM 要素を扱う際の class 名、id 名の付け方
- class は基本的に CSS から参照する用。ハイフン繋ぎ、もしくは BEM など。
- JS からはなるべく class セレクタを使わず id セレクタを使う。
- Ruby on Rails のビューで JS を使うときは id はスネークケースにすると erb と整合性が取り易い。
- JS 用の class 名は Trello 式で
js-プレフィックスを付けると、デザイナーが不用意に JS 用 class 名を変更することが防げる。 - カスタム data 属性を活用する。
参考：
html の id 属性と class 属性の命名はハイフンか camel か snake か – Qiita
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
Trello CSS Guide
- JS 用の class には
js-プレフィックスを付ける。
参考：
id
- 要素の識別子であり、ドキュメント内でユニークでなければならない。
- 文法に違反して複数存在する場合に
document.getElementByIdを使うと、最初の要素が取得される。(実装に依存する可能性あり。) - 大文字と小文字は区別される。(ケースセンシティブ)
参考：
Document.getElementById() | MDN
className
参考：
Element.getElementsByClassName() | MDN
dataset
参考：