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- プレフィックスを付ける。

参考:

Trello CSS Guide

id

  • 要素の識別子であり、ドキュメント内でユニークでなければならない。
  • 文法に違反して複数存在する場合に document.getElementById を使うと、最初の要素が取得される。(実装に依存する可能性あり。)
  • 大文字と小文字は区別される。(ケースセンシティブ)

参考:

element.id | MDN

Document.getElementById() | MDN

className

参考:

element.className | MDN

Element.getElementsByClassName() | MDN

dataset

参考:

HTMLElement.dataset | MDN

data-* | MDN

Using data attributes | MDN

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です