新闻资讯

道维向您推荐的一种组织CSS的方法

推荐的一种组织CSS的方法:base.css+common.css+page.css。将网站内的所有样式,按照职能分成三大类:base、common和page。在一般情况下,任何一个网页的最终表现都是由这三者共同完成的。这三者并不是并列结构,而是层叠结构。


    page
    ↓
    common
    ↓
    base


1.base层


这一层位于三者的最底层,提供CSS reset功能和粒度最小的通用类---原子类。
这一层会被所有页面引用,是页面样式所需以来的最底层。这一层与具体UI无关,无论何种风格的设计都可以引用它,素以base层要力求精简和通用。这一层的核心职能犹如房子的地基一样重要,亦扮演着网页中最基础的同样重要的角色。


2.common层


这一层位于中间,提供组件级的CSS类。与common层相关的是样式的模块化,模块化可以从样式和行为两个层面来考虑。我们可以将页面内的元素拆分成一小块一小块功能和样式相对独立的小模块,这些模块有些是很少重复的,有些是会大量重复的,我们可以将大量重复的模块视为一个组件。我们从页面尽可能多地将组件提取出来,放在common层里。common层就相当于MVC模式中的M(Model模型)。为了保证重用性和灵活性,M需要尽可能将内部实现封装,对可能会经常变化的部分提供灵活的接口。不同的房子选用不同的门窗,common层就像建房时用到的门窗,房子选用的门窗就好比这个网站选用的UI组件。门窗最好与整个房子的风格保持一致。同样,网站最好让UI组件的风格保持相同。UI组件是网站中的单位,在网站内部可以高度重用,但不用的网站可能会用不同的UI组件。
所以,comman层的网站级的,不同的网站有不同的common层,同一个网站只有一个common层。common层是放在一个common.css文件里,还是按照功能划分放在诸如common_form.css、common_imagelist.css的多个文件里,需要根据网站规模来决定。在团队合作中,common层最好由一个人负责,统一管理。


3.page层


网站中高度重用的模块,我们把它们视为组件,放在common层;非高度重用的模块,可以把它们放在page层。page层位于最高层,提供页面级的样式。page层就好比是房间内的装饰画,不同房间的装饰画各不相同。
page层是页面级的,每个页面都可能有自己的page层CSS.page层的文件可以分离出来写,也可以放在一个page.css文件里,根据页面配上注释,分块书写,便于维护。实例:


/*首页*/
.test{}
.test2{}


/*关于我们*/
.test3{}
.test4{}


/*联系我们*/
.test5{}
.test6{}


这样做可能会带来些冗余,比如,首页的css文件里带有“关于我们”、“联系我们”页的page层CSS文件,而这些对首页的样式毫无影响。但是,对于文件过于分散和集中的问题并没有完美的解决方法,我们需要根据实际情况做些适当的折中。比起让page层的CSS文件过于繁多和零散,把它们集中在一个文件中更便于维护,且便于浏览器缓存,浏览网站时只有首页的下载时间较长,浏览其他页面时反而较快。当然,page.css还是应当越精简越好,能用base层和common层的CSS解决的,就尽量不要用到page层。


base层基本上不需要维护,common层修改的幅度不会很大,通常只由一个人负责维护,但到了page层,代码可能由多人开发,如何避免冲突是个需要注意的问题。通常我们通过命名规则来避免这种冲突。