繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS之少用继承，多用组合
- CSS样式表
- 用div+css模拟表格对角线
- 10个HTML和CSS代码修正IE6问题的方法
- IE6因为编码问题无法正确解析CSS
- 3G时代 移动WEB设计资料WAP
- 内联元素是什么意思呢？什么是块级别元素
- 初学者需要知道WEB标准的前景
- CSS网页布局id和class类的命名介绍
- 快速定位到复杂的CSS BUG问题
- 学完CSS后该学什么？
- CSS实例:鼠标滑过文字超级链接背景变色
- CSS教程:所有浏览器中都能正常显示的字体
- 如何用css控制input中的text和radio
- 浏览器处理网页字体效果对比
- 网页制作学习:reflow概念
- CSS样式表的hack的写作方法
- CSS代码优化的两个原因
- 解决父容器透明子容器不透明继承问题
- 网页制作学习:reflow的问题
- CSS实现透明效果颜色的方法:RGBa
- DIV+CSS制作网页心得
CSS样式表 中的 CSS之少用继承，多用组合
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 108 ::
收藏到网摘: n/a
继承是 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上引用了几个，但是代码和逻辑都非常清晰，而且非常容易维护，随意组合随意扩展。从上面可以看到“组合”的方式是不言而喻的，但是也不是十全十美的，再拆分组合的时候一定不要过度，不然效果可能适得其反，只有把组合+继承运用的恰到好处才能让我们的代码更加优雅和艺术。
评论 (0) All
