【CSS】CSSを肥大化させないために

一つのクラスで完結するスタイルじゃなく
複数のクラスでスタイル指定する方式の提案

##１．デザインを決める
使用する文字色、サイズなどをきめる。
・赤だったら#cc0000とか
・黒だったら#333333とか
・影とか

使用する線の色、太さ、スタイルなどを決める
・同上

使用する背景色を決める
・同上

##２．決めたデザインに合わせてスタイルクラスを作る

１つのクラスに複数のデザインを持たせない。
ボックスとテキストとボーダー、など分類をある程度きめてプリフィックスで分類。
ベンダープリフィックス等のブラウザの差異は可能な限りクラス定義のなかで吸収させる（ここでは省略・・・）

.txblack{color:#333333;}
.txred{color:#cc0000;}
.txlarge{font-size:x-large;}
.txmiddle{}
.txsmall{font-size:x-small;}
.txshadow{text-shadow:2px 2px 1px #333;}

.bdred{border-color:red;}
.bdthick{border-width:2px;}
.bdthin{border-width:1px;}
.bdsolid{border-style:solid;}
.bdnone{border:none 0px transparent;}

.bxshadow{box-shadow:2px 2px 1px #333;}

など

##３．よく使うスタイルクラスを作る
.txright{text-align:right;}
.txleft{text-align:left;}
.txcenter{text-align:center;}
.txtop{vertical-align:top;}
.txbottom{vertical-align:bottom;}
.txmiddle{vertical-align:middle;}
.bxleft{float:left;}
.bxright{float:right;}
.bxnone{clear:both;}

.dispnone{display:none;}

など

##４．下記のようにして使う

<img src="xxx" alt="xxx" class="bdnone bxleft bxshadow">
<span class="txred txmiddle txshadow">ほげほげ</span>