主页 > 知识库 > 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上引用了几个,但是代码和逻辑都非常清晰,而且非常容易维护,随意组合随意扩展。从上面可以看到“组合”的方式是不言而喻的,但是也不是十全十美的,再拆分组合的时候一定不要过度,不然效果可能适得其反,只有把组合+继承运用的恰到好处才能让我们的代码更加优雅和艺术。
您可能感兴趣的文章:
  • js中继承的几种用法总结(apply,call,prototype)
  • 不错的一篇关于javascript-prototype继承
  • C++中的三种继承public,protected,private详细解析
  • 实现JavaScript中继承的三种方式
  • javascript prototype的深度探索不是原型继承那么简单
  • 深入了解javascript中的prototype与继承
  • Javascript 继承机制的实现
  • C++中virtual继承的深入理解
  • javascript的函数、创建对象、封装、属性和方法、继承
  • C++ 继承详解及实例代码

标签:上海 红河 河南 新疆 乐山 沈阳 长治 沧州

巨人网络通讯声明:本文标题《CSS之少用继承,多用组合》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266