技術メモ・TIPSの最近のブログ記事

先週からこのBlogのデザインが微妙に変わっている。 外見上の変化はわずかだが、実はMTテンプレートとスタイルシートを全部一から作り直した。 細かな不具合もあったし、ソースも汚かったしというのが主な理由だが、他にもちょっと試行錯誤 してみたい事があった。それはＣＳＳファイルの記述方法である。

最近は、仕事でＣＳＳファイルを弄る機会も急激に増えたのだが、どーもしっくりこない。 元々プログラムでも、自分のソースはコメントも少ないし、おそらく他人から見れば あまり見やすい方では無いのだが それでも自分なりのルールがあって、自分のソースを見ればホッとする感覚はあった。

しかしスタイルシートだけは、どーもいけない。自分で書いたソースでもまるで他人のものみたいで、 頭にポンと入ってこないのだ。そんな事もあって、ＣＳＳ弄りはあまり好きではなかったのだが、 ちょっとしたアイディアを思いついて試してみたら、これがハマった。クリティカルヒット！

まあ、こーゆーのは人それぞれ趣味があるので皆が好むとは限らないし、 もしかしたら自分が知らなかっただけで、実はよくある書き方なのかもしれないが、 とりあえずやった事無い人、ＣＳＳの書き方で悩んでる人は一度トライする価値あり。 自分的には、すっかりＣＳＳコーディングが好きになってしまったｗ。
以下解説。

通常、ＣＳＳの記述は以下の様な感じだと思う。 例えば、aa, bb, cc という３つのclassを定義する場合

/**** aa定義 ****/
.aa {
	margin: 25px;
	text-align: left;
	font-size: 90%;
	line-height: 140%;
	color: #333333;
	padding: 0px;
	background: #FFFFFF url(back1.jpg) no-repeat;
	border: 1px solid #CCCCCC;
}

/**** bb定義 ****/
.bb {
	margin: 0px;
	text-align: center;
	font-size: normal;
	line-height: 150%;
	color: #000000;
	padding: 20px;
}

/**** cc定義 ****/
.cc {
	margin-top: 30px;
	font-size: 110%;
	font-weight: bold;
	line-height: 150%;
	color: #FF0000;
	padding: 20px;
	background: #999999 url(back2.jpg) repeat;
	border-bottom: 1px solid #000000;
}

.aa { margin: 25px; }

...中略...

.aa { text-align: left; }

と分けて書いても問題無い。
で、これを発展させて一旦定義をバラバラにして 同じ種類の定義ごとにまとめてしまったら判りやすいんじゃないか と思ってやってみた次第。 そーすると前述のaa,bb,ccの定義は以下の様になる。

/**** マージン,パディング ****/
.aa {
	margin: 25px;
	padding: 0px;
}
.bb {
	margin: 0px;
	padding: 20px;
}
.cc {
	margin-top: 30px;
}


/*** アライン ***/
.aa {
	text-align: left;
}
.bb {
	text-align: center;
}


/*** フォントサイズ、色関連 ***/
.aa{
	font-size: 90%;
	line-height: 140%;
	color: #333333;
}
.bb{
	font-size: normal;
	line-height: 150%;
	color: #000000;
}
.cc{
	font-size: 110%;
	font-weight: bold;
	line-height: 150%;
	color: #FF0000;
}


/*** 背景 ***/
.aa{
	background: #FFFFFF url(back1.jpg) no-repeat;
}
.cc{
	background: #999999 url(back2.jpg) repeat;
}


/*** ボーダー ***/
.aa{
	border: 1px solid #FFFFFF;
}
.cc{
	border-bottom: 1px solid #000000;
}

この例だとピンとこないかもしれないが、大量の定義が記述された ＣＳＳだと効果てき面。 この「分散定義」のメリットを箇条書きにしてみると以下の様な感じ。

1. 変更したい時に該当箇所を見つけやすい
2. 定義を追加したい時に、前後からコピペして値だけ変更すればよいのでラク
3. 重複や、必要の無い定義が一目でわかる
4. 定義のネストや相関がわかりやすい
5. 表示が思い通りにならない時に試行錯誤がしやすい

だいたい表示が思い通りにいかないのは、 マージンとパディングの衝突とか、フォントサイズなどある程度パターンが決まっている。 ブラウザによっても解釈が違ったりして、このテのチューニング作業は かなりやっかいだ。

例えばある部分のマージンがおかしい時に、マージン定義だけが一箇所に固まっていると この試行錯誤がメチャメチャやりやすい。原因をつきとめる効率が格段に上がる。
デメリットとしては、定義が分散する分やや冗長になってしまう事くらいか。でも、そのデメリットを補って余りあるメリットを感じた。

ＣＳＳの書き方で悩んでる人にはぜひ、オススメしたい。 自分はしばらくコレでいきます。

[2005/10/28追記]
コメント欄でMMさんにご紹介いただいたサイト貼っておきます。
CSS記述規則「プロパティ別整理法」の提案
はてなブックマークでも話題になっていたみたいで、知らなかったオレ負け組(´･ω･`)。先方では「プロパティ別整理法」と銘打っております。つか、このネーミングの方が正確だねママン。提唱者のあきやん氏は、かなり厳格なルールの適用を提案しております。まだご存知ない方はぜひ一度上記サイトもご参照ください。

(※ただ、自分の実感としては若干異論もあって、例えば「marginとpadding」などは、併せて書いた方がメインテナンス性は向上すると思いますし、またあきやん氏は、「最初からCSSを起こす時はプロパティ別整理法は推奨しない」としておりますが、私は最初からプロパティベースで記述してこそ意味があると思いました。ツールで自動整形するのではなく、「自分のソース」を自分のものとして完全に把握するための「分散定義」である、というのが私のこのエントリーの主旨なので)