网络编程
位置:首页>> 网络编程>> 网页设计>> CSS模块化设计

CSS模块化设计

作者:greengnn 来源:greengnn博客 发布时间:2009-01-05 12:10:00 

标签:模块,设计,css,类

自己有一套模块化的思路,想搜索一下有没有共鸣结果排名靠前的是通过class拼凑页面的想法。模块化是twinsen提出来的,从我接收第一个portal类网站开始就认可他这种思路,不过到现在也没太推广开去,其实就是CSS写法的东东。

什么是模块化CSS,举个例子就是人,都有脑袋,眼睛,鼻子手脚等器官,但是别人的器官坏了,并不影响你的正常使用,因为人和人是彼此独立的,彼此独立就不会相互影响,在版本迭代,多人协同开发上优势就更为明显。
具体应用就是
<模块1>
<子元素1></子元素1>
<子元素2></子元素2>
</模块1>
<模块2>
<子元素1></子元素1>
<子元素2></子元素2>
</模块2>

CSS方面用后台选择符的形式组织
模块1 {}
模块1 子元素1 {}
模块1 子元素2 {}
模块2 {}
模块2 子元素1 {}
模块2 子元素2 {}

这样就保证了模块1 的作用域只限于模块1而影响不到模块2,模块1不管变更多少次,不管被谁修改,模块2依然完好无损。体现在研发流程上就是模块1的需求不断变化,CSS不断重写,写模块1的人不在了,别人要可以放心的处理模块1,而不用担心影响这个网站的视觉表现。当然浮动布局和上下布局是做不到不影响的,但是耦合性还是小了很多,仔细看csszengarden的代码也能发现是这个思想。

相互独立的模块组成的网页,CSS拓展性方面也增强了很多,因为模块间嵌套少了,可以更加随意的摆放。

模块化拓展思路就是CSS作用域控制,一般CSS可以划分全局样式和局部页面样式,全局样式又分为全局模块,和全局样式初始化(reset,基本的类等)。css文件上可以分为全局css和局部页面css,全局css里再分全局模块样式和全局初始化样式。如:
g.css
-reset
-link
-form
-全局模块
--header
--footer
--提示框
--分页
index.css
首页的css
detail.css
新闻详细页面css
-模块1
-模块2
......

这样整个网站的样式作用域区分就很明晰了,样式定位修改迭代也方面很多,管理起来也省事许多,首页改版就新建一个index_v2,模块修改就修改为模块1_v2,需要别人协助,就注释写清楚谁谁修改该模块的什么什么特性。要多人同时维护就划分清楚你负责哪些模块,他负责哪些模块。初始化样式最好压缩成一行,一次搞定尽量避免修改。

对比class多重拼凑的页面容易接手和维护的多,不至于样式优先级乱到不停的抢优先级,和复杂到一丁点的class修改都心惊胆战。

大体上就说明模块化CSS设计的思路和好处了。但是这样有个缺陷就是表现上看似复用的不敢复用,因为会增加耦合性,后台选择符很冗长,太浪费字节。

当然这些都是随环境不同权衡选择,如果你的网站多年来就你自己一个人折腾,没有资源会帮助你,或者你的设计稿很规范,确定了一个网站基本控件表现不会变动,那就大胆的复用,甚至建立一个个组件去拼凑网站页面。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com