コーディングの書式に今更迷う

2012年は、私たちコーダーの制作環境に大きな変化があった年でした。

春先にGoogleがコーディングガイドラインを公開し、

Sass・Compassといった、CSSを支援する拡張が本格的に普及し、

レスポンシブレイアウト対応のサイトが増え、

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

エディタをSublime Text 2に乗り換える人が増えました。
私も乗り換えました＾v＾

Sublime Text: The text editor you'll fall in love with

それに伴ってコーディングやスニペットの見直しをしているわけなのですが、かえって迷って効率が下がったり、手数が増えてしまっているところです。

とりあえず、悩み中なことをまとめます。

class・変数の命名はハイフネーションかキャメルケースか

今年の初めくらいから、HTMLのクラス名と、PHP・JavaScriptの変数名をキャメルケース（最初の単語は小文字、以降は単語ごとに大文字で区切る）に切り替えました。
配布しているCMSテーマは、キャメルケースになっています。

<h1 id="siteTitle"><a href="http://webbingstudio.com/logicaljp_demo/">logical_jpデモサイト</a></h1>

これは、JavaScriptでは変数名にハイフンを使ってはいけないこと、

言語仕様/JavaScriptリファレンス（後半：変数名の規則を参照）
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー – latest log

PHPのフレームワーク「CakePHP」の変数の基本書式がキャメルケースであることから、文法を統一しようとはじめたことでした。

CakePHPのコーディング規約 | アイビースター

なので、Google HTML/CSS Style Guideの発表はかなり心が折れました。

私の協業先の制作会社はハイフネーションを採用しているところがほとんどで、変更したことでスニペットの修正が必要になって、逆に手数が増えてしまったこともあります。

テーマも含めてハイフネーションに戻すしかなさそうだなあと、凹んでいるところです。

border関連のショートハンド

CSSのborderのショートハンドには二種類の書き方があります。
上・右・下・左で分ける書き方と、スタイル・幅・色で分ける書き方です。

/* 上・右・下・左で分ける書き方 */
.hoge {
	border-top: 1px solid #CCC;
	border-right: 2px solid #CCC;
	border-bottom: 3px solid #CCC;
	border-left: 4px solid #CCC;
}

/* スタイル・幅・色で分ける書き方 */
.hoge {
	border-style: solid;
	border-color: #CCC;
	border-width: 1px 2px 3px 4px;
}

私はここ数年、必要なボーダーが一ヶ所しかない場合は、上・右・下・左で分ける書き方にして、二か所以上のときはスタイル・幅・色で分ける書き方にしていました。

/* 一ヶ所しかないとき */
.hoge {
	border-bottom: 1px solid #CCC;
}

/* 二か所以上あるとき */
.hoge {
	border-style: solid;
	border-color: #CCC;
	border-width: 1px 0 0 1px;
}

普通のデザインでは上下左右でスタイルと色が変更になる場面はあまり多くなく、コードが冗長になるのが気になったからなのですが、効率を考えるとどっちかに統一してしまった方がいいのでは…と思っています。

Sassを導入予定なので、もしかしたらこの悩みはなくなるのかもしれませんが。

多用するスタイルのモジュール化

クリアフィクス・CSS3の角丸・アイコンのスプライトなど、サイト内で頻繁に使用するスタイルは、クラスを付けてモジュール化するテクニックがよく使われます。

.clearfix {
	zoom: 1;
}
.clearfix:after {
	content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

.radius {
	position: relative;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
	behavior: url(../common/PIE.htc);
}

これだと、HTMLのclass属性に見た目に関する指示を書くことになるので、なんとなく納得が行かず、これまで要素ごとに都度書いていました。

ですが、Twiter Bootstrapの登場で、この辺は形骸化しつつあります。
CSS3のベンダープレフィクスや、IE対応をするとコードがかなり冗長になってしまい、メンテナンス性も悪いので、来年から割り切ろうと思っています。

配布しているテーマのCSSを見ると、背景画像のスプライトだけがモジュール化されている、中途半端な状態になっています。

インデントはタブの方がいい＞＜

Google HTML/CSS Style Guideでいちばん納得いかないのがこれです。
タブの方がいいですよー＞＜

タブだと、エディタでの半角スペースとの表示がはっきり異なるので見やすいです。協業先もほとんどがタブを採用しているので、これについては当分変えるつもりはありません。

（実は一案件だけ変更したのですが、コーディング速度が落ちて断念しました）

ただし、MacOS版のSublime Textでは、ZenCodingの起動がタブキーなので、キーバインドを変更しなければいけません。
ミスタッチが少ない⌘＋Eか、指に負担がかからない⌘＋Enterのどっちがいいかで、また悩み中です。

書いていたら頭が痛くなってきました…

サイトを新規作成するときに使っている、基礎テンプレートがあるのですが、この調子では正月休み中に全面見直しになりそうです。

来年は、コーディング関連の書籍も、ずいぶん色が変わってくるのではないでしょうか。
制作・改修の効率化優先の人、スマホ対応も視野に入れた軽量化優先の人、AdobeのCS6との連携重視の人、それぞれに新しいノウハウがあると思うので、かなり気になります。

追記

Facebookで友だちからいろいろ指摘されました _(:3」∠)_

「インデントがタブ」は良くないと思う。タブが何スペース分として表示するかが言語によって（人によって）違うことがあり、万が一タブとスペースが混ざった場合インデントが酷いことになるから
「ハイフネーションかキャメルケースか」は統一できるものではなく、言語によって使い分けるのが良いと思う
何を迷っているのかがわからない。コーディング標準を適用する目的を間違えていないか？

Blog

class・変数の命名はハイフネーションかキャメルケースか

border関連のショートハンド

多用するスタイルのモジュール化

インデントはタブの方がいい＞＜

追記