栏目级作用域──页面重构中的模块化设计（二）
由 Ghostzhang 发表于 2010-04-03 14:49
在《样式的作用域──页面重构中的模块化设计（一）》中，我将样式的作用域分为了三个部分：公共级（全局）、栏目级（局部公共）、页面级。公共级（全局）容易理解，即影响站点中所有页面。简单解释下栏目级（局部公共）和页面级：
页面级可分为两种情况：在多个页面间，页面级作用域指针对某一单独的页面定义；在同一个页面中，页面级作用指针对某一标签的定义。它将决定最终的页面效果。栏目级（局部公共）介于全局与单个页面之间的一个作用域，影响一个栏目（或某区域）。通常以某一类选择符做为开始，以包含选择符的方式将样式定义限定在某一区域中。
代码语言：javascript复制/* 只影响demo这个区域 */
.demo a{...}
.demo p{...}
.demo .title{...}需要消化下的内容，决定一个样式定义是属于哪个作用域的因素有以下两点：
- 样式定义所在样式文件中的位置。（同样的一个定义，放在不同的位置，所影响的范围会有所不同。）
- HTML中绑定demo这个类的标签位置。（同样一个类，绑定在body标签和绑定在页面中某个标签上，所影响的范围也会不同。）
在一个站点中，可能会分为几个不同的栏目，同一个栏目中，一般风格会保持一致。而不同的栏目间，相似的风格则不一定会相同。即使是全站通用的模块，如翻页，也可能会因为栏目的不同而会有一些差异，比如链接的颜色等等。使用栏目级的样式定义，能很好的减少代码的冗余，提高模块的复用性。
另外需要在思维上注意的一点，以作用域划分，并不意味着有着对应的文件，可能有些同学会习惯的以为一个作用域就应该对应着一个文件。比如一个小的栏目，可能只有两三个页面，这时我们就不一定需要再把栏目级的定义单独出来一个文件，而是与页面级的定义一起放在一个文件里，像这样：
代码语言：javascript复制/* S 栏目级定义 */
.class{...}
/* E 栏目级定义 */
/* S 页面级定义 */
.page{...}
/* E 页面级定义 */
