概要

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

記事をシェアする:
タグ:

コメントを残す

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