栏目级作用域──页面重构中的模块化设计(二)

Ghostzhang 发表于

在《样式的作用域──页面重构中的模块化设计(一)》中,我将样式的作用域分为了三个部分:公共级(全局)、栏目级(局部公共)、页面级。公共级(全局)容易理解,即影响站点中所有页面。简单解释下栏目级(局部公共)和页面级:

页面级
可分为两种情况:在多个页面间,页面级作用域指针对某一单独的页面定义;在同一个页面中,页面级作用指针对某一标签的定义。它将决定最终的页面效果。
栏目级(局部公共)
介于全局与单个页面之间的一个作用域,影响一个栏目(或某区域)。通常以某一类选择符做为开始,以包含选择符的方式将样式定义限定在某一区域中。

/* 只影响demo这个区域 */
.demo a{...}
.demo p{...}
.demo .title{...}

需要消化下的内容,决定一个样式定义是属于哪个作用域的因素有以下两点:

  • 样式定义所在样式文件中的位置。(同样的一个定义,放在不同的位置,所影响的范围会有所不同。)
  • HTML中绑定demo这个类的标签位置。(同样一个类,绑定在body标签和绑定在页面中某个标签上,所影响的范围也会不同。)

在一个站点中,可能会分为几个不同的栏目,同一个栏目中,一般风格会保持一致。而不同的栏目间,相似的风格则不一定会相同。即使是全站通用的模块,如翻页,也可能会因为栏目的不同而会有一些差异,比如链接的颜色等等。使用栏目级的样式定义,能很好的减少代码的冗余,提高模块的复用性。

另外需要在思维上注意的一点,以作用域划分,并不意味着有着对应的文件,可能有些同学会习惯的以为一个作用域就应该对应着一个文件。比如一个小的栏目,可能只有两三个页面,这时我们就不一定需要再把栏目级的定义单独出来一个文件,而是与页面级的定义一起放在一个文件里,像这样:


/* S 栏目级定义 */
.class{...}
/* E 栏目级定义 */
/* S 页面级定义 */
.page{...}
/* E 页面级定义 */

评论