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

  • 122
    いいね
  • 3
    コメント
この記事は最終更新日から1年以上が経過しています。

CSSはハイフン(foo-bar)1、JavaScriptはCamel(fooBar)、Rubyはsnake(foo_bar)文化。
じゃあ、みんなが共有するHTMLのid、class属性はどの書式で書けばいいのか?
HTML/CSSの人が書くことが多いからか、有名サイトを調べてみると、ハイフンが多い。
でも、JavaScriptで要素を取得したときに次のようにハイフンをCamelにしなければならないので、どうもしっくりこない。

<div class="foo-bar">foo bar</div>
<script>
var fooBar = $('.foo-bar'); // foo-barなの?fooBarなの?
</script>

世の中のトレンド

BEM

CSSの命名規則で有名なBEMはハイフンもアンダースコア(_)も、アンダースコア2つ(__)も使う。
個人的には、うーん。。。

Trello CSS Style Guide

色々と有名なCSSスタイルガイドはあるけど、個人的に一番好きなのがこれ。

Trello CSS Guide

  • class名はハイフン区切り(分類はModifierとStateだけ)
  • idは1CSSでは使わない
  • JavaScript用のclass属性にはjs-プレフィックスをつける

これだと、CSSとJavaScriptで住み分けができるので悪くはないけど、次のように違和感が残る。

<div id="fooFoo">fooFoo</div>
<div class="class-for-css js-barBar">barBar</div>

<script>
var fooFoo = $('#fooFoo'); // こっちはOK
var barBar = $('.js-barBar'); // js-をとらなければならないので微妙
</script>

ハイフン vs Camel論争

調べた中で、最も熱い議論だと思ったのがこれ。
結論はないけど、とてもよい議論。

Why are dashes preferred for CSS selectors / HTML attributes?

ハイフン批判の概要

  • ハイフンつなぎだと複数文字の結合扱いになるから補完が一発できかないし、ダブルクリックで全選択できないじゃないか(参考:ハイフンとアンダースコアは異なる扱い)
  • JavaScriptのオブジェクトのドットノーテーションが使えないじゃないか
  • 数式のマイナスと区別がつきにくいじゃないか
  • JavaScriptはCamelだからセレクターでとった要素の変数名がidと異なるものになるじゃないか

ハイフン擁護の概要

秀逸な回答はこれ(他は略)。

JavaScriptはclass属性を使うな

批判が多いけど、個人的にはいいアイディアだと思う。

Don't use class names to find HTML elements with JS

  • class属性はcss専用にする
  • JavaScriptは$('[data-age-group="0-12"]')とか$('[data-age-group]')みたいにカスタムデータ属性で要素を取得する
  • セレクターの速度はclass属性を使うよりも遅くなるけど大差ない

解決策

Trello方式とか全てCamelやsnakeで統一する方法以外であれば、次の方法がいいと思う。

ルール

  • CSSはclass属性しか使わない(id属性は使わない)
  • CSS以外はclass属性を使わない
  • JavaScriptはカスタムデータ属性(data-id="fooBar"など)を使う
  • サーバーサイド(Ruby on Railsとか)が自動でid属性をCamel以外で設定するなら、JavaScriptはid属性を使わない。そうでなければ、JavaScriptはid属性を使ってもいい
  • [2015/08/17 コメントをうけて追加]JavaScriptの操作がclass属性操作の場合は、JavaScriptでclass属性をつかってもいい

このルールにすると、次のように住み分けができる。

基本

分類 書式 用途
id属性 Camel JavaScript専用
class属性 ハイフン CSS専用
カスタムデータ属性 Camel JavaScript専用

サーバーサイドがid属性をCamel以外で自動設定する場合

例えば、Ruby on Railsのときは、次のとおり。

分類 書式 用途
id属性 snake Rails専用
class属性 ハイフン CSS専用
カスタムデータ属性 Camel JavaScript専用

  1. cssは微妙だけど、少なくともcssのプロパティはハイフンだ(font-familyのように)。