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號字，有些要變局10px有些要20px，估計這個時候你就要頭大了，如果要用用繼承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>

….
我們看一些雖然在class上引用了幾個，但是代碼和邏輯都非常清晰，而且非常容易維護，隨意組合隨意擴充。從上面可以看到“組合”的方式是不言而喻的，但是也不是十全十美的，再拆分組合的時候一定不要過度，不然效果可能適得其反，只有把組合+繼承運用的恰到好處才能讓我們的代碼更加優雅和藝術。