CSS之少用繼承，多用組合
更新時(shí)間：2008年11月18日 00:54:24 作者：
繼承是 css中經(jīng)常要用到的技術(shù)，好處是可以盡量讓頁面的代碼減少重復(fù)利用，但是隨時(shí)項(xiàng)目越來越大，需求的不斷變化，css代碼就會(huì)變得越來越臃腫，后期難以控制和維護(hù)。其實(shí)，css代碼和普通程序代碼在編寫的時(shí)候有很多的相似之處，下面我們就用試試用組合的方式是不是能更好的解決這個(gè)問題。
下面是一段普通的代碼:
css:
.box{
border:1px solid #ccc;
font-size:12px;
background:#f1f1f1;
padding:10px;
}
html：
<div class="box">this is a gray box</div>
但是這個(gè)時(shí)候需求增加了，在頁面中不僅要有一個(gè)灰色的盒子可能還有藍(lán)色的盒子，可能還有綠色，通常我們會(huì)說用集成嘛，好我們就做如下更改
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>
但是這個(gè)時(shí)候需求又有變化了，根與應(yīng)用的不同，盒子中有些要用到12號字，有些要用到14號字，有些要變局10px有些要20px，估計(jì)這個(gè)時(shí)候你就要頭大了，如果要用用繼承css代碼就會(huì)變得異常的復(fù)雜，那我們就來試驗(yàn)一下用組合的方式看能不能解決。
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上引用了幾個(gè)，但是代碼和邏輯都非常清晰，而且非常容易維護(hù)，隨意組合隨意擴(kuò)展。從上面可以看到“組合”的方式是不言而喻的，但是也不是十全十美的，再拆分組合的時(shí)候一定不要過度，不然效果可能適得其反，只有把組合+繼承運(yùn)用的恰到好處才能讓我們的代碼更加優(yōu)雅和藝術(shù)。
css:
復(fù)制代碼 代碼如下:
.box{
border:1px solid #ccc;
font-size:12px;
background:#f1f1f1;
padding:10px;
}
html：
復(fù)制代碼 代碼如下:
<div class="box">this is a gray box</div>
但是這個(gè)時(shí)候需求增加了，在頁面中不僅要有一個(gè)灰色的盒子可能還有藍(lán)色的盒子，可能還有綠色，通常我們會(huì)說用集成嘛，好我們就做如下更改
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號字，有些要用到14號字，有些要變局10px有些要20px，估計(jì)這個(gè)時(shí)候你就要頭大了，如果要用用繼承css代碼就會(huì)變得異常的復(fù)雜，那我們就來試驗(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í)候一定不要過度，不然效果可能適得其反，只有把組合+繼承運(yùn)用的恰到好處才能讓我們的代碼更加優(yōu)雅和藝術(shù)。
相關(guān)文章
關(guān)于< tbody >的一個(gè)實(shí)例，很實(shí)用。
tbody Tab選項(xiàng)卡效果代碼關(guān)鍵只是在<tbody>和選項(xiàng)卡的設(shè)置上。我在6個(gè)<tr></tr>段分別設(shè)置了<tbody></tbody>，目的是為了讓一個(gè)javascript程序調(diào)用6個(gè)選項(xiàng)卡的時(shí)候可以循環(huán)設(shè)置tBodies屬性。調(diào)用的時(shí)候是采用了遍歷：將6個(gè)tBodies先全部都初始化為display='none'，然后緊接著將tBodies[n]設(shè)置為display='block'，將這一個(gè)tBodies顯示出來。2008-03-03
如果給div元素設(shè)置了寬度時(shí)，比如width:100%，此時(shí)div在IE中（IE6，IE7）將占據(jù)物理空間，而在FF中不占據(jù)物理空間（正確理解）。為了表述直觀，將樣式直接寫在元素標(biāo)簽內(nèi)：2008-03-03
css結(jié)合filter實(shí)現(xiàn)的鼠標(biāo)滑過圖片效果代碼2008-06-06
CSS 規(guī)則的優(yōu)先級是Web前端開發(fā)人員必須理解的一個(gè)概念，我們常用的添加樣式的方法有4種。2008-04-04
今天遇到一個(gè)神奇的問題：下面是代碼 代碼在IE7中正常顯示，IE6什么也不顯示。2008-05-05
在大多數(shù)文章中，我們并未特別注意CSS文件的可維護(hù)與可讀性的問題，當(dāng)完成一項(xiàng)前端的工作之后，許多人都會(huì)忘記該項(xiàng)目的結(jié)構(gòu)與細(xì)節(jié)。然而代碼并不是馬上就能完全定型，在余下的時(shí)間里還有不斷的維護(hù)工作，而這些工作也許不會(huì)是你自己完成。2008-09-09
IE浮動(dòng)邊界BUG延伸探討...2007-02-02
padding、border會(huì)把div撐大的解決方法
所有HTML元素都可以看作盒子,CSS盒模型本質(zhì)上是一個(gè)盒子,封裝周圍的HTML元素,它包括：邊距,邊框,填充,和實(shí)際內(nèi)容,盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素,因?yàn)镈iv添加了padding、border,Div的實(shí)際寬度=Div的初始固定值+邊距值+邊框值2023-09-09
HTML實(shí)現(xiàn)title 屬性換行小技巧
本文給大家?guī)淼氖且粋€(gè)在html中title屬性換行的小技巧，非常的實(shí)用，這里推薦給各位，不用謝我~2014-12-12
常用的DIV+CSS的基本框架結(jié)構(gòu)但不推薦都放一個(gè)div里
常用的DIV+CSS的基本框架結(jié)構(gòu)但不推薦都放一個(gè)div里...2007-09-09