• 詳細度を上げない。
• クラスを使い、規則集合を局所化しないで、使いまわす。
• デフォルトクラスを構造と、スキンに分けて作る
• デフォルトクラスを継承した拡張スキンクラスを必要に応じて作るmod.css mod_skin.css
• ページレイアウトは、template.cssに記述する
• ブラウザデフォルトをリセットするlibraries.css
• 要素毎の新しい規則集合をcontent.css
• ホリゾンタルレイアウトのための、grid.css

抽象的とか、意味的といったような、例えば、「右側」といった視角指定のための規則集合を用意して、必要に応じて、デフォルトクラス　と　併記して、デフォルトクラスの視角指定を継承して、設定を拡張していくといった考え方があるのだと思う。

CSSの記述は、局所的なスタイルを確実にする。例えば、.right よりも、div#contnt img.rigthtみたいな記述のほうが、確実に目的のところにスタイルを当てられるので、よい。と考えているものにとっては、少し違和感が出ると思う。

しかし、局所的なスタイルの設定が、CSSファイルサイズを大きくしている。という指摘は、そのとおり

CSSはエラーを出さないために、ブラウザ間の互換性も含めたいろいろなしわ寄せが押し寄せている場所だから、メタボになっている。

そうだとして、そのようにしようと思った時、当然クラス名はどんどん｢詩的」な名前になっていくだろう。それを、いつでも思い出せるようになっていられるだろうか？

つまり、｢僕は、君の過ちを決して指摘することはないよ。だから、コードリーディングするようなことはしなくていいよ。」このようなCSSのささやきに対して、どこまで毅然としていられるかという問題なんだろうと思う。

CSS code sample

/* **************** TEMPLATE ***************** */
/* ====== Page Head, Body, and Foot ====== */
body{_text-align:center;}/* IE5.5 */
.body{overflow:hidden; _overflow:visible; _zoom:1;}
/* wraps other template elems to set width */ /* text-align IE5.5 */
.page{margin: 0 auto; width: 950px;_text-align:left;} 
/* "old school" and "liquid" extend page to allow for different page widths */
.oldSchool{width:750px;}
.gs960{width:960px;}
.liquid{extends:.page; width: auto;margin:0;}
/* ====== Columns ====== */
.main{overflow: hidden;_overflow:visible;_zoom:1;}
.leftCol{float:left; width:250px;_margin-right:-3px;}
.rightCol{float:right; width: 300px;_margin-left:-3px;}
/* extend columns to allow for common column widths */
.gMail{width:160px;}
.gCal{width:180px;}
.yahoo{width:240px;}
.myYahoo{width:300px;}

上記のサンプルは、ダウンロードした状態そのままのコードですが、extents:.page;という実在しないプロパティによる表現が、意図を表しているのだろうと思う。

ところで、分散.cssの出現順位は、当然だけど依存性があるから、順番違うと、うまく動作しないよ

test用のスタイルを指定しているindex.phpのコードはこんな感じだよ

<?php
header ("content-type: text/css;");
header ("cache-control: must-revalidate");
$expire = "expires: " . gmdate ("D, t M Y 15:0:0", time()) . " GMT";
header ($expire);
ob_start ("ob_gzhandler");
readfile('libraries.css');
echo "\n";
readfile('grids.css');
echo "\n";
readfile('mod.css');
echo "\n";
readfile('template.css');
echo "\n";
readfile('content.css');
echo "\n";echo "\n";
readfile('mod_skins.css');
echo "\n";
ob_end_flush();
?>

以下のように 特定のIDの子要素を指定するような書き方は、推奨されない。

  #weatherModule h3{color:red;}
  #tabs h3{color:blue}

h3はグローバル指定なのでよいけれども、IDを使うと使い回しが効かなくなって、たくさんのスタイル指定を行わなくてはならなくなる。ので、出来るだけ局所的な設定は、たぶん推奨されない。

  h3{color:black;}
  #weatherModule h3{color:red;}
  #tabs h3{color:blue}

weatherで縛るにしても、クラスから指定するべきなんだと思う。

.fine{…}が、一番汎用性が増すから、そちら側に出来るだけ寄せた指定が必要。

  .cloudy,.fine{color:green;}
  .weather{background:red;color:#fff;}
  .weather.fine {background:blue;color:#fff;font-weight:bold;}
  .weather.cloudy{background:gray;color:#fff;}

class="weather"

class="weather fine"

class="weather cloudy"

class="cloudy"

フォームやエントリなどのブロックにデフォルトのスタイルを指定しておいて、表現を調整しなければならない部分だけ、ほかのクラスで最小限の指定を行う。

例えば、img エレメントであらかじめ、決めておいたスタイルに対して、float:left；だけを指定したクラスを別に書いておくことで、記述量を減らすというような作業になっていく。

float:leftだけを書いたクラスは、imgだけでなく、div等でも使いまわしていくことで、効率を上げる発想の様子

使いまわしの観点から、classの指定が非常に多くなったり、h3エレメントに対して、class="h4"があたっているなどの、ちょっと不思議なことがなぜなのか、何となくわかってくる。