• CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log

を見て、自分はいつも-を使ってるので、その理由を書いてみる。

結論から言うと、-でも_でもキャメルでもどれでもいいと思う。で、自分が-を使っているのは、jQuery UIのcssがそのように書かれていて、僕が年中、ヘビーにjQuery UIのベースとなっているwidgetというフレームワークを使っているから。そして、仕事でやる場合にはだいたいコレを使うので、それに習っている感じ。参照：The jQuery UI CSS Framework

-を使う時は、名前空間的な意味合いで使う。単語の区切り目としては使わない。具体的には、こんな感じ。ここで使っているmod-は、モジュールの単位を表す、mod-modulenameを起点にしてそっから下のひとまとまりがcssをごそっと適用するひとかたまりだよーという意味。apply-は、なんかJSをユーティリティ的にぽこっと適用するときに使う。

単語の区切り目は、キャメルケースにしたいところだけどあえてoremoduleみたいに全部小文字で書いちゃう。これは、jQuery UIがなんかそうしてたからだった気がする。あと、widgetは、カスタムイベント名を何故か全部小文字にしやがるので、とりあえずそんな長い単語は使わんから小文字に統一しておくかというぐらい。ま、jQuery UIが敷いているコーディングルールだと思う。たぶん。

widgetは、こんな感じでjQueryプラグイン上でOOPをするようなフレームワークで、こいつを書くと、例えばこの例だと、$.fn.hoge が作られ、コレを適用すると、そのウィジェットは、classにmod-hogeが付いてる前提で話が進む。別にそれをどうこうするわけじゃないけど、とりあえずそういう考えで作られてるものだったりするので、そんな感じでハイフンを付けてる。そーしとけば、html見たときにどのウィジェットと対応してるのか分かったりするのでやや便利。

これって、そもそもjQuery UIが-じゃなくて_にすべきだってでしょ常考とかも思うけど、まーそうなってるんでそうしてる。これはただのコーディングルール的なもので、超絶意味があるとも思わない。というか、_の方がJS的には嬉しいよ…

html+cssの設計的な視点からすると、mod-hogeの中に来る要素にはmod-hoge-hdとかmod-hoge-pとかなんとかそんな感じでclassを振っていく。で、これは非常に冗長な感じがする。たしかにそれはそうなんだけど、テンプレエンジンでちょっとしたhtmlソースの断片を扱うときには、それが何を示しているか分かりやすいというメリットがある。あと、モジュールが入れ子になった時も分かりやすいとか。が、確かに冗長ではある。安全策で固い書き方という印象。

あとは、なんかそういうふうに名前空間的に使っておけば、mod-modulenameのmodulename部分が被っていなければいらんところで知らんスタイルがかかったりしないので、良い気がしてる。そんでもって、ハイフンでそういうふうにしておけば、同じクラス名になったりとかしなさそうな気がする。_でも同じだけど、キャメルだとなんか被っちゃいそう（な気がするだけ）

まとめると、おれはjQuery UIに従うぜジョジョーーーッということで、別に_でもキャメルでもいい気がする。というか、元記事にあるように、vimで全部選択できないから、個人的には_の方が好き。というか_のほうが良いと思うんだけど。