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 さんにご指摘いただき、「はじめに」の文を一部修正しました。

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)

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)が便利です！

SOY CMS の SOY Inquiry は簡単にお問い合わせフォームを作ることができます。お問い合わせされた内容はCSVではき出したり SOY Mail で管理することができるので大変便利です。いくつかのサイトで利用させてもらっているのですが、出力されるフォームをカスタマイズしたいということがあると思います。チェックボックス「その他」の後に入力ボックスをつけたい、メールやサンクス画面で項目名がまるまる表示されてしまうので管理用とは別に表示用の長い項目名を使用したい、など。そういうときに使えるハックを覚書しておきます。SOY CMSの既存ファイルを優先的に表示する特性を活かした、フォームの入力画面を静的HTMLで偽装する方法です。

１．app/webapp/inquiry/src/template/以下のSOY Inquiryのテンプレート、form.phpとconfirm.php中の <form aciton="#"> を <form action="index.php"> へ変更しアップロードし更新します。

２．出力されたフォームをファイル名index.htmlでローカルに保存します。

３．保存したフォームのHTMLファイルをエディタなどで直接編集しカスタマイズしていきます。
フォームの項目名や項目の表示位置などを変えていきますが、name属性やvalue値は変更しないでください。
フォームの最後のほうにある、 <input name="data[hash]" type="hidden" value="ほげほげ" /> はコメントアウトしておきます。

４．保存したフォームのHTMLの一番上に以下の記述を加えます。

<?php
if(isset($_GET["complete"])){
header("HTTP/1.1 301 Moved Permanently");
header("Location: ＜お問い合わせフォームのURL＞/index.php?complete&trackid=".$_GET["trackid"]);
exit();
}
?>

５．保存したフォームのHTMLを、お問い合わせフォームのURLと同じディレクトリ構成でアップロードします。

６．お問い合わせフォームのURLと同じディレクトリに以下内容が含まれる.htaccessを制作しアップロードします。

AddType application/x-httpd-php .htm .html

７．お問い合わせフォームへはindex.htmlでリンク、もしくはスラ止めにしたときにindex.htmlが表示されるようにしておきます。以上で完成です。

最初は静的なHTML（index.html）を表示させて、データの投入はSOY Inquiry（index.php）にリンクさせています。フォームの最初の画面のみ注意事項が表示されるといったことも可能ですので、一手間かかりますが細やかなカスタマイズをしたリッチなフォームを作ることができます。ただし、送信後の画面から「訂正する」を押すとカスタマイズ前のSOY CMS独自のページとフォームになりますので、デザインの変更程度にとどめるのがよろしいかと思います。ちょっと変えたいといったときに試してみてください！バージョンやサーバ環境のかねあいもありうまくいかなかったらごめんなさい。あと脆弱性につながるようでしたらこそっと教えてください。

なお、2月20日に開催する「CSS Nite in TAKAMATSU, Vol.2 powered by KDDIウェブコミュニケーションズ 国産CMS特集」でこのSOY CMSについて触れられます。昨今業界で多く取り上げられている各種CMSを知ることは、Web業界の流れを知り、これからWeb制作を行っていく上で重要なポイントになると思います。またCMSの導入に併せて考えないといけないのがレンタルサーバー選び。レンタルサーバー選びのツボも教えていただけるとのこと。興味のある方はぜひご参加ください。

Fireworksのスクリプトの実行、今日めんどいなあと思う作業があって調べてみたんですけど、便利すぎて衝撃的でした。今までどうして知らなかったんだろうという感じです。以下サイトでいくつか紹介されていますが、スライスに連番＋一括名前設定は効率的すぎてやばいです。さっそく使わさせてもらっています。

■オリジナルツール / Fireworks用オリジナルコマンド(jsf)一覧 (PIXEL LAB)
http://www.pixelimage.jp/blog/2008/02/_fireworks.html

で、上記サイトを参考に僕もFireworksでスライス名を一括置換するスクリプトを書いてみました。以下スクリプトを拡張子「jsf」で保存、対象のスライスを選択して「コマンド」→「スクリプトの実行」→保存したスクリプトを読み込んでご利用いただけます。「C:\Documents and Settings\～ユーザー名～\Application Data\Adobe\Fireworks CS3\Commands」に入れれば「コマンド」メニューに加わります。スライスを流用するのだけどそのままの名前では使えないときや、ガイドラインでハイフンは使用禁止でアンダースコアにしなきゃいけなくなったとか、なんにせよスライス名を置換したいシチュエーションってけっこうあるので覚え書きしておきます。

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

for (var i=0;i<le;i++){if(fw.selection[i] =="[object SliceHotspot]")sliceArray.push(i);}
var leng = sliceArray.length;

var searchName = prompt('SEARCH',( fw.newName || ""));
fw.searchName = searchName;
var replaceStr = prompt('REPLACE',( fw.numberStr || ""));
fw.replaceStr = replaceStr;

for (var i=0;i<leng;i++){
    var n = sliceArray[leng-i-1];
    fw.selection[n].baseName = fw.selection[n].baseName.replace(fw.searchName,fw.replaceStr);
}

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