css 繼承與組合

繼承是 css中經常要用到的技術，好處是可以盡量讓頁面的**減少重複利用，但是隨時專案越來越大，需求的不斷變化，css**就會變得越來越臃腫，後期難以控制和維護。其實，css**和普通程式**在編寫的時候有很多的相似之處，下面我們就用試試用組合的方式是不是能更好的解決這個問題。

下面是一段普通的**:

1. .box

1. this is a gray box

但是這個時候需求增加了，在頁面中不僅要有乙個灰色的盒子可能還有藍色的盒子，可能還有綠色，通常我們會說用整合嘛，好我們就做如下更改

1. .box-gray, 2. .box-green 7. .box-gray 8. .box-green

1. this is a gray box 2. this is a green box

但是這個時候需求又有變化了，根與應用的不同，盒子中有些要用到12號字，有些要用到14號字，有些要變局10px有些要20px，估計這個時候你就要頭大了，如果要用用繼承css**就會變得異常的複雜，那我們就來試驗一下用組合的方式看能不能解決。

1. .fs-12 2. .fs-14 3. .pd-10 4. .pd-20 5. 6. .box 9. .box.gray 10. .box.green

1. this a gray fontsize12px padding20px box 2. this a gray fontsize14px padding10px box 3. ….

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