CSS森林

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

页面级

可分为两种情况：在多个页面间，页面级作用域指针对某一单独的页面定义；在同一个页面中，页面级作用指针对某一标签的定义。它将决定最终的页面效果。

栏目级（局部公共）

介于全局与单个页面之间的一个作用域，影响一个栏目（或某区域）。通常以某一类选择符做为开始，以包含选择符的方式将样式定义限定在某一区域中。

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

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

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

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

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

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