カテゴリー
TV・映画

CSS「分散定義」のススメ

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

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

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

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

通常、CSSの記述は以下の様な感じだと思う。
例えば、aa, bb, cc という3つの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;
}

てな具合に、各class毎の記述を纏めてしまうのが一般的。

でもCSSでは、べつに定義を一度に書く必要は無くて、

.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;
}

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

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

特に、4と5。

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

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

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

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

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

「CSS「分散定義」のススメ」への9件の返信

MMさん>
参考になるサイトをご紹介いただきありがとうございます。
拝見しました。私なんかよりはるかに解説が詳細で、そして徹底してますね!スゴイ!
ぶくましたら、すでに290users! orz
ミンナシッテタノカ…
まあ、でも自分の感覚もあながち間違ってなかったと、ちょっと自信になりました。(・∀・)
記事の方にも追記しておきます。ありがとうございました。

[WWW]目から鱗のスタイルシート記法

当サイトのCSSは修正すべき課題を抱えていて(ご指摘を受けてから2ヶ月以上経ってる・・・)、どのように手直しすべきか、「スタイルシートによる崩れない 2カラム …

あーなるほど、紹介先でちょっと自分の所のcss変換してみましたが、確かにこういうのわかり易いですねー!
…ただ、先のツールはfont-familyとかで日本語混じってると化けちゃう…(´・ω・`)
もっと早く思いついて下さったら、秋に変更しようと思って夏から作ってたcssが完成してたかもしれないのになー…と、ちょっと恨みがましく責任転嫁などしてみるテスツ|´・ω・)ノ

なんか、MTのバージョンが上がるにつれてなのか、扱いが複雑になったような希ガス
自分トコのテンプレ、修正しようと思ったのだけど、もうなにがなにやら。
とりあえずほっとく。
何かお勧めの教科書があったらおせーて

お久しぶりです。
ボクもCSS好きじゃないんですけど、
こういう書き方があるんですね~。なるほど~。
ただ、開発規約で書き方が固定されちゃってることが多いので、
今後は、こういう書き方にするように圧力をかけていこうと思います(笑)

cioさん>
>…ただ、先のツールはfont-familyとかで日本語混じってると化けちゃう…(´・ω・`)
おおー、そうでしたか。つか、ファイルそのもののエンコードUTF-8とかにしたら直るのじゃないかしらん。自分試してないけど…(´・ω・`)
nomadさん>
MTはねー、テンプレートの記述方法は以前のバージョンからそんなに変わってないんじゃないかと思うっすよ。
参考書っすかー。むー何を知りたいかによって人それぞれだと思うので、まずは立ち読み推奨。とりあえず最近は選り取りみどりですよ、えー小倉先生の裁判の方じゃなくw
まさよしさん>
>開発規約で書き方が固定されちゃってることが多いので、
なんかしら、規約があれば見やすくはなりますよね。どんな規約かしらん?
おー、圧力かけちゃってくだせいw。やってみると想像以上に書きやすいっすよ。オススメです。

スタイルシートのデザイン手法とCSSファイルの保存方式

スタイルシートを一から書き上げる場合、いろいろな方法がある。 基本的にDream…

コメントは受け付けていません。