首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > css教程

CSS之少用继承，多用组合_经验交流

原创
2016-05-16 12:04:081202浏览
下面是一段普通的代码:
css:
复制代码 代码如下:

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

html：
复制代码 代码如下:

this is a gray box


但是这个时候需求增加了，在页面中不仅要有一个灰色的盒子可能还有蓝色的盒子，可能还有绿色，通常我们会说用集成嘛，好我们就做如下更改
css:
复制代码 代码如下:

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

Html:
复制代码 代码如下:

this is a gray box

this is a green box


但是这个时候需求又有变化了，根与应用的不同，盒子中有些要用到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
复制代码 代码如下:

this a gray fontsize12px padding20px box

this a gray fontsize14px padding10px box


….
我们看一些虽然在class上引用了几个，但是代码和逻辑都非常清晰，而且非常容易维护，随意组合随意扩展。从上面可以看到“组合”的方式是不言而喻的，但是也不是十全十美的，再拆分组合的时候一定不要过度，不然效果可能适得其反，只有把组合+继承运用的恰到好处才能让我们的代码更加优雅和艺术。
CSS 继承 组合PHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：了解CSS的查找匹配原理，让CSS更简洁、高效_经验交流下一条：div+css模拟表格效果代码_经验交流
【24期】《PHP小白到大牛》线上班，开始报名了！
PHP培训优惠套餐
Vue3+TP6+API电商开发教学课程套餐
总价：¥ 2800
套餐价：¥ 2200
全套咨询
课程咨询
前端基础到实战（HTML5+CSS3+ES6+NPM）
¥ 800521人感兴趣
精品课
PHP基础到实战（PHP+MySQL）
¥ 800345人感兴趣
精品课
Vue3+TP6+API 社交电商系统实战（前后端分离）
¥ 1200559人感兴趣
精品课

相关文章

查看更多
  • 相关课程
PHP直播课
打开APP，随时随地在线学习！