CSSはハイフン(foo-bar)¹、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は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のように)。 ↩

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