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. アンダースコアはどうなのか？

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

おわりに

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

（2010/12/16追記）
@nbomber さんにご指摘いただき、「はじめに」の文を一部修正しました。

2010年4月10日（土）、Web制作者向けの小規模な勉強会「第1回 Webridge Meeting～はじめての勉強会」で、「Web制作を加速させるAdobeアプリケーションでのJavascript」というタイトルで、PhotoshopやFireworks、Dreamweaverなどで動作する、主にHTMLコーディングのスピードを加速させる便利なコマンド機能や拡張機能を、デモを交えながらご紹介しました。

スライドをslideshareにアップしましたので掲載しておきます。また、Webridge Kagawaのウェブサイトのレポートとフォローアップの記事でもごらんいただけます。（SlideShareにアップしたところ、SlideShareのeditorial teamに「Featured Presentations & Documents」に選んでいただき、しばらくトップページに掲載されていたのがうれしかったです！）

まだまだ勉強不足で、特にPhotoshopとDreamweaverが2つのスクリプトしか紹介できなかったので残念ですが、ほかにも便利なコマンドや拡張機能がありましたらコメント欄などで教えていただけますと幸いです。各拡張機能やスクリプトはスライド中のURLからダウンロードできます。（当日動作しなかったものや自作のスクリプトで検証段階のものはcoming soonとしています）

勉強会などでWeb制作技術についてお話しするのは久しぶりでしたが、いかに技術をわかりやすくおもしろくお伝えするか、あらためて考えさせられかなり勉強になりました。勉強会に参加された方は見苦しいところも多々お見せしてしまったかと思いますが、これからもお付き合いいただけると幸いです！

Fireworksで複数行のテキスト、複数のテキストオブジェクトのテキストを、1行にまとめてコピーするコマンドを書きましたので覚え書きしておきます。複数のテキストオブジェクトの内容を取得し結合する場合、背面のレイヤーから、前面のレイヤーに向かって結合されます。カーニングなどにより空白が生まれることはありません。

var altText = "";
for(i=fw.selection.length-1;i>=0;i--){
 for(j=0;j<fw.selection[i].textRuns.textRuns.length;j++){
 altText += fw.selection[i].textRuns.textRuns[j].characters;
 }
}
altText = altText.replace(/[\r\n|\n|\r]/g,"");
prompt("you can copy this text.",altText);

jsfファイルのダウンロードはこちらから

上記スクリプトを拡張子「jsf」で保存して、対象のスライスを選択して「コマンド」→「スクリプトの実行」→保存したスクリプトを読み込むことでご利用 いただけます。

CS3をお使いのWindowsユーザの方は「C:\Documents and Settings\～ユーザー名～\Application Data\Adobe\Fireworks CS3\Commands」に、 Macユーザの方は「/Application/Adobe Fireworks CS3/Configuration/Commands/」に入れれば「コマンド」メニューに加わります。

CS4をお使いのWindowsユーザの方は、「C:\Users\～ユーザ名～\AppData\Roaming\Adobe\Fireworks CS4\Commands」に、Macユーザの方は、「/Application/Adobe Fireworks CS4/Configuration/Commands/」に入れれば「コマンド」メニューに加わります。

コマンドメニューに加わればキーボードショート カットとして登録することができるのでとっても便利です！Fireworksで作られたデザインをコーディングするときには、コピーしてアプリケーションを切り替えてペーストして、という繰り返しの作業が不要になり、制作スピードが倍以上になるかと思います！私自身、一ヶ月前から制作して活用していますが本当に便利で欠かせないコマンドになっています。ぜひご活用ください。

see also:
Fireworksでスライス名を一括置換するスクリプト (jsf)
Fireworksでスライス名を簡単に変更するコマンド (jsf)

今週末の2010年4月10日（土）、Web制作者向けの小規模な勉強会「第 1回 Webridge Meeting～はじめての勉強会」を香川で開催します。地元のWeb制作者がまったり楽しく集まって、自分が作ったものを披露したり、ほかの人の制作環境を知ったり、消化できなかった／知らない知識を知ったり、といった集まりにしたいと思っています。

そこで、「Web制作を加速させるAdobeアプリケーションでのJavascript」として、これまでに覚え書きしてきた、「Fireworksでスライス名を簡単に変更するコマンド (jsf)」や、「Fireworksでスライス名を一括置換するスクリプト (jsf)」、また、そのほか覚え書きれていない便利コマンド（後日公開予定です）や、ほかの方が作ったすばらしい拡張機能やスクリプトの使いどころなどについて、ご紹介したいと思います。

参加お申し込みは以下サイトの「このイベントに参加登録する」から事前登録をお願いします！お時間がありましたらぜひ覗いてみてもらえるとうれしいです。

第１回 Webridge Meeting : ATND

Fireworksのスライス名を簡単に変更するエクステンションと同様のことを実現するFireworks用のコマンド（jsf）を書きましたので覚え書きしておきます。使っているPCに管理者権限がなくてエクステンションがインストールできないといったときにお使いいただけます。スライスを選択してこのコマンドを実行すれば、選択したスライス名を変更するダイアログが表示されます（複数のスライス選択変更にも対応しています）。

var dom = fw.getDocumentDOM()
var sliceArray = new Array();

for (var i=0;i<fw.selection.length;i++){
 if(fw.selection[i] =="[object SliceHotspot]") sliceArray.push(i);
}
for (var i=0;i<sliceArray.length;i++){
 var target = sliceArray.length-i-1;
 var newName = prompt('Please input change slice name below.',fw.selection[target].baseName);
 if( newName != null) fw.selection[target].baseName = newName;
}

jsfファイルのダウンロードはこちらから

上記スクリプトを拡張子「jsf」で保存して、対象のスライスを選択して「コマンド」→「スクリプトの実行」→保存したスクリプトを読み込むことでご利用いただけます。jsfファイルをWindowsユーザの方は「C:\Documents and Settings\～ユーザー名～\Application Data\Adobe\Fireworks CS3\Commands」に、Macユーザの方は「/Application/Adobe Fireworks CS3/Configuration/Commands/」に入れれば「コマンド」メニューに加わります。コマンドメニューに加わればキーボードショートカットとして登録することができます！お困りの方はぜひこちらもご利用いただければと思います。

なお、一括してスライス名をふりたいときにはPIXEL LABさん制作のslice_nambering.jsf、一括してスライス名を置換したいときには、拙作Fireworksでスライス名を一括置換するスクリプト(jsf)が便利です！