继承是
css中经常要用到的技术,好处是可以尽量让页面的代码减少重复利用,但是随时项目越来越大,需求的不断变化,css代码就会变得越来越臃肿,后期难以控
制和维护。其实,css代码和普通程序代码在编写的时候有很多的相似之处,下面我们就用试试用组合的方式是不是能更好的解决这个问题。
下面是一段普通的代码:
css:
-
.box
{
-
border:
1
px
solid
#ccc
;
-
font-size:
12
px
;
-
background:
#f1f1f1
;
-
padding:
10
px
;
-
}
html:
-
<
div
class
=
"
box
"
>
this is a gray box
</
div
>
但是这个时候需求增加了,在页面中不仅要有一个灰色的盒子可能还有蓝色的盒子,可能还有绿色,通常我们会说用集成嘛,好我们就做如下更改
css:
-
.box-gray
,
-
.box-green
{
-
border:
1
px
solid
#ccc
;
-
font-size:
12
px
;
-
padding:
10
px
;
-
}
-
.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:
12
px
}
-
.fs-14
{
font-size:
14
px
}
-
.pd-10
{
padding:
10
px
}
-
.pd-20
{
padding:
20
px
}
-
-
.box
{
-
border:
1
px
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上引用了几个,但是代码和逻辑都非常清晰,而且非常容易维护,随意组合随意扩展。从上面可以看到“组合”的方式是不言而喻的,但是也不是十全
十美的,再拆分组合的时候一定不要过度,不然效果可能适得其反,只有把组合+继承运用的恰到好处才能让我们的代码更加优雅和艺术。
分享到:
相关推荐
2019-11-25 王争设计模式之美进入课程讲述:冯永吉时长 10:51大小 9.95M在面向对象编程中,有一条非常经典的设计原则,那就是:组合优于继承,多用
继承是 css中经常要用到的技术,好处是可以尽量让页面的代码减少重复利用,但是随时项目...其实,css代码和普通程序代码在编写的时候有很多的相似之处,下面我们就用试试用组合的方式是不是能更好的解决这个问题。
精品多用途组合模板下载是一款基于HTML5+CSS3实现的响应式网页模板设计下载。.zip精品多用途组合模板下载是一款基于HTML5+CSS3实现的响应式网页模板设计下载。.zip
精品多用途组合模板下载是一款基于HTML5+CSS3实现的响应式网页模板设计下载。_html网站模板_网页源码移动端前.rar
精品多用途组合模板下载是一款基于HTML5+CSS3实现的响应式网页模板设计下载。.rar
电子政务-多用组合式电冰箱.zip
精品多用途组合模板下载是一款基于HTML5+CSS3实现的响应式网页模板设计下载。
行业文档-设计装置-一种多用组合式台架.zip
行业资料-交通装置-一种多用组合移动拉马.exe
行业文档-设计装置-一种多用组合式台架构成方法.zip
行业文档-设计装置-一种多用组合教师用尺
html+css+js多用途登录页面模板,适用于网页设计登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板,DW网页成品源代码等,2000+套Web案例源码,优质文章,关注作者获取更多源码
行业文档-设计装置-用于幼儿教学的多用组合台
电子政务-多用组合机吸糠分离器专用电动机.zip
行业文档-设计装置-一种新型多用组合式体育器材.zip
但目前网页布局多用表格、层等,CSS元素多是嵌入到HTML标记中使用,不能自如地改变网页的版面布局,也不能充分发挥CSS在版面布局中的强大作用.WEB信息网页的制作日益成为大众化的技术,对于电子信息管理人员来说,...
行业文档-设计装置-多用组合式预制钢筋混凝土池.zip
响应式大屏企业网站模板是一款基于HTML5+CSS3+Bootstrap制作的多用途企业模板。_html网站模板_网页.rar
行业文档-设计装置-一种具有储电功能的多用组合式台灯.zip