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スタイルガイドはあるけど、個人的に一番好きなのがこれ。
- class名はハイフン区切り(分類はModifierとStateだけ)
- idはCSSでは使わない
- 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と異なるものになるじゃないか
ハイフン擁護の概要
秀逸な回答はこれ(他は略)。
- ハイフンにすると、|= attribute selectorという便利なものが使えるのだよ
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専用 |
-
cssは微妙だけど、少なくともcssのプロパティはハイフンだ(font-familyのように)。 ↩