快捷導(dǎo)航

CSS之少用繼承，多用組合

更新時(shí)間：2008年11月18日 00:54:24 作者：

繼承是 css中經(jīng)常要用到的技術(shù)，好處是可以盡量讓頁(yè)面的代碼減少重復(fù)利用，但是隨時(shí)項(xiàng)目越來(lái)越大，需求的不斷變化，css代碼就會(huì)變得越來(lái)越臃腫，后期難以控制和維護(hù)。其實(shí)，css代碼和普通程序代碼在編寫的時(shí)候有很多的相似之處，下面我們就用試試用組合的方式是不是能更好的解決這個(gè)問題。

下面是一段普通的代碼:
css:

復(fù)制代碼代碼如下:

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

html：

復(fù)制代碼代碼如下:

但是這個(gè)時(shí)候需求增加了，在頁(yè)面中不僅要有一個(gè)灰色的盒子可能還有藍(lán)色的盒子，可能還有綠色，通常我們會(huì)說(shuō)用集成嘛，好我們就做如下更改
css:

復(fù)制代碼代碼如下:

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

Html:

復(fù)制代碼代碼如下:

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

但是這個(gè)時(shí)候需求又有變化了，根與應(yīng)用的不同，盒子中有些要用到12號(hào)字，有些要用到14號(hào)字，有些要變局10px有些要20px，估計(jì)這個(gè)時(shí)候你就要頭大了，如果要用用繼承css代碼就會(huì)變得異常的復(fù)雜，那我們就來(lái)試驗(yàn)一下用組合的方式看能不能解決。
css:

復(fù)制代碼代碼如下:

.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

復(fù)制代碼代碼如下:

<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上引用了幾個(gè)，但是代碼和邏輯都非常清晰，而且非常容易維護(hù)，隨意組合隨意擴(kuò)展。從上面可以看到“組合”的方式是不言而喻的，但是也不是十全十美的，再拆分組合的時(shí)候一定不要過(guò)度，不然效果可能適得其反，只有把組合+繼承運(yùn)用的恰到好處才能讓我們的代碼更加優(yōu)雅和藝術(shù)。

您可能感興趣的文章: