CSS之少用继承,多用组合

发布时间:2022-04-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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之少用继承,多用组合全部内容,希望文章能够帮你解决CSS之少用继承,多用组合所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。