CSS之少用继承，多用组合
更新时间：2008年11月18日 00:54:24 作者：
继承是 css中经常要用到的技术，好处是可以尽量让页面的代码减少重复利用，但是随时项目越来越大，需求的不断变化，css代码就会变得越来越臃肿，后期难以控制和维护。其实，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上引用了几个，但是代码和逻辑都非常清晰，而且非常容易维护，随意组合随意扩展。从上面可以看到“组合”的方式是不言而喻的，但是也不是十全十美的，再拆分组合的时候一定不要过度，不然效果可能适得其反，只有把组合+继承运用的恰到好处才能让我们的代码更加优雅和艺术。
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上引用了几个，但是代码和逻辑都非常清晰，而且非常容易维护，随意组合随意扩展。从上面可以看到“组合”的方式是不言而喻的，但是也不是十全十美的，再拆分组合的时候一定不要过度，不然效果可能适得其反，只有把组合+继承运用的恰到好处才能让我们的代码更加优雅和艺术。
相关文章
tbody Tab选项卡效果代码关键只是在<tbody>和选项卡的设置上。我在6个<tr></tr>段分别设置了<tbody></tbody>，目的是为了让一个javascript程序调用6个选项卡的时候可以循环设置tBodies属性。调用的时候是采用了遍历：将6个tBodies先全部都初始化为display='none'，然后紧接着将tBodies[n]设置为display='block'，将这一个tBodies显示出来。2008-03-03
如果给div元素设置了宽度时，比如width:100%，此时div在IE中（IE6，IE7）将占据物理空间，而在FF中不占据物理空间（正确理解）。为了表述直观，将样式直接写在元素标签内：2008-03-03
css结合filter实现的鼠标滑过图片效果代码2008-06-06
CSS 规则的优先级是Web前端开发人员必须理解的一个概念，我们常用的添加样式的方法有4种。2008-04-04
今天遇到一个神奇的问题：下面是代码 代码在IE7中正常显示，IE6什么也不显示。2008-05-05
在大多数文章中，我们并未特别注意CSS文件的可维护与可读性的问题，当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。2008-09-09
IE浮动边界BUG延伸探讨...2007-02-02
所有HTML元素都可以看作盒子,CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括：边距,边框,填充,和实际内容,盒模型允许我们在其它元素和周围元素边框之间的空间放置元素,因为Div添加了padding、border,Div的实际宽度=Div的初始固定值+边距值+边框值2023-09-09
本文给大家带来的是一个在html中title属性换行的小技巧，非常的实用，这里推荐给各位，不用谢我~2014-12-12
常用的DIV+CSS的基本框架结构但不推荐都放一个div里...2007-09-09
最新评论