CSSの少用継承、多用結合

以下は普通のコードです。css: 

.box{ 
border:1px solid #ccc; 
font-size:12px; 
background:#f1f1f1; 
padding:10px; 
}

.html：

<div class="box">this is a gray box</div> 

しかし、この時間は需要が増えました。ページの中には灰色の箱があるだけでなく、青色の箱もあるかもしれません。緑色もあるかもしれません。一般的には集積を使うと言います。じゃ、次のようにcss:

.box-gray, 
.box-green{ 
border:1px solid #ccc; 
font-size:12px; 
padding:10px; 
} 
.box-gray{background:#f1f1f1} 
.box-green{background:#66ff66} 

html:

<div class="box-gray">this is a gray box</div> 
<div class="box-green">this is a green box</div> 

を変更します。箱の中には12号の文字を使うものがあります。14号の文字を使うものもあります。10 pxを変えるものもあります。この時は頭が大きいと思います。cssコードを継承すると非常に複雑になります。組み合わせで解決できるかどうか試してみます。css:

.fs-12{font-size:12px} 
.fs-14{font-size:14px} 
.pd-10{padding:10px} 
.pd-20{padding:20px} 

.box{ 
border:1px solid #ccc; 
} 
.box.gray{background:#f1f1f1} 
.box.green{background:#66ff66} 

Html 

<div class="box gray fs-12 pd-20">this a gray fontsize12px padding20px box</div> 
<div class="box green fs-14 pd-10">this a gray fontsize14px padding10px box</div>

...いくつかのコードと論理はクリアされていますが、簡単に維持され、任意に組み合わせて拡張されます。上から「組み合わせ」が見えるのは言うまでもありませんが、完璧ではないです。再分割する時には無理をしないようにしてください。そうでないと効果は逆になるかもしれません。組み合わせを＋継承して使うほどいいです。コードがより優雅で芸術的です。