XHTML+CSSのid/class名でキャメルケースを使うべきではない7つの理由を、CSS WIZARDRYの「CSS: CamelCase Seriously Sucks!」から覚え書きします。

CSS: CamelCase Seriously Sucks!

下記はその意訳です（間違っていたらすみません）。

はじめに

今、この記事が何人かの人をいらだたせることは分かっているし、私はふつうコードの書き方は教えません。私はシングルラインCSSがキライです。ただ、明瞭で、道理にかなった、理解しやすく、首尾一貫したコードであるならば、そんなに文句を言うことはありません。私の目から見て最も重要なのは一貫性です。しかしながら、キャメルケースは、本質的に矛盾していることが明らかなのです。

1. CSSはハイフンで区切られた構文

CSSはハイフンで区切られた構文です。どういうことかというと、font-size、line-height、border-bottomのようなものを書きます。別のフォーマットを導入する理由がどこにあるでしょう？

#introPassage{ /* Using one format here */
   font-style:italic; /* And another here */
}

構文を混在させるべきではありません。それは矛盾しています。

2. XHTMLは小文字の言語

小文字の構文に、大文字と小文字を混在させたclass名やid名を混ぜるのは、さらに矛盾しています。

<img src="/img/people/harry-roberts.jpg" alt="A picture of Harry Roberts"  class="userImageAvatar" />

この例では、小文字の構文と、プレーンテキストと、どちらでもない何かが混在しています。

3. キャメルケース自体がもつ矛盾

キャメルケースは独自に定義した規則の中でも、矛盾の範囲を広げています。

#content{ ... }
#subContent{ ... }

この例では、汎用的なコンテンツのコンテナとして使用される2つの要素がありますが、ひとつはcontent（頭が小文字）として、もうひとつはContent（頭が大文字）として、呼び出されています。これはいったいどういうことでしょうか？

4. 読みにくくなっている

キャメルケースは読みにくくなっています。単語間の空白があるだけで、はるかに読みやすくなります。CSSのセレクタではスペースを含むことができないので代わりにハイフンを使っています。

#someIdIMadeEarlier{
  font-size:2em;
}

#some-id-i-made-earlier{
  font-size:2em;
}

2番目の例が読みやすくなっていないと主張するのは難しいのではないでしょうか。

5. 走り読みしやすい

走り読みのしやすさもまた、コードを書く上で重要な要因です。

.navHome a { ... }
.navAbout a{ ... }
.navPortfolio a{ ... }
.navContact a{ ... }

.nav-home a { ... }
.nav-about a{ ... }
.nav-portfolio a{ ... }
.nav-contact a{ ... }

特定の接頭辞のclassを探している場合、個人的には2番目の方がはるかに走り読みしやすいです。

6. ハイフンはテキストエディタでよいはたらきをします

これは私の使っているさまざまなテキストエディタで確認できました。これは奇妙なものですが、確実に、間違いなく、私をいらいらとさせます。キャメルケースの文字列では、Ctrl+Shift+[矢印キー]でひとつの単語を選べません。（訳注：Macの場合は、Option+[矢印キー]？）

.tweetPromoButton
.tweetPromoButton

私はときどき、一文字を選択するよりも、Ctrl+Shift+左キーを使ってテキストのまとまりを選択します。ここでの問題はキャメルケースの場合は、文字列がひとつの単語として扱われることです。もしtweetをfacebookに変えたいときはどうでしょうか？Ctrl+Shift+矢印キーでは変えられません。ハイフンで区切られたバージョンなら可能です。

.tweet-promo-button
.tweet-promo-button
.tweet-promo-button
.tweet-promo-button

こちらは、はるかに簡単に、文字列の個々の部分を選択することができます。ここでtweetをfacebookに変える作業は、これ以上シンプルになるはずがありません。

7. アンダースコアはどうなのか？

アンダースコアも、上記で言及している、矛盾と文字列の個々の部分を選択できない、同様の問題を引き起こします。

おわりに

思い出していただきたいのは一貫性がカギということです。言語の構文はすでに決められているので、それに忠実に従いましょう！