CSS模块化(六) 模块化设计

6. 模块化设计

6.1 样式的作用域──页面重构中的模块化设计（一）

模块化设计我已经提过很多了，都是跟模块化相关的，不过之前一直没有讲到具体实现方面的内容，只是一些思维。这次重点讲一下实现方面的内容，权当到目前为止我对模块化的一些总结整理。

要做好模块化，我觉得理解好样式的作用域是很重要的。写过程序的同学应该都知道，变量是有作用域的（不知道的同学自己去问谷歌，这里就不作解释了），样式的定义也同样存在着作用域的问题，即定义的作 用范围，很容易就能理解，如下面的p的作用域：

 CODE:

/*作用域：全局*/ p{text-indent:2em;}

 

 CODE:

/*作用域：.demo这个类中*/ .demo p{color:#000000;}

    样式选择器的优先级是学习样式的基础知识，一起简单回顾下：

● 标签的权值为0,0,0,1

● 类的权值为0,0,1,0

● 属性选择的权值为0,0,1,1

● ID的权值为0,1,0,0

● important的权值为最高1,0,0,0

使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。虽然很简单，但如果书写的时候没有注意，很容易就会导致CSS的重复定义，代码冗余。从上面我们可以得出两个关键的因素：

1）权值的大小跟选择器的类型和数量有关

2）样式的优先级跟样式的定义顺序有关

了解样式的权值后有什么作用呢？比如可以这样用：举一个最简单的例子

CODE:

body{color:#555555;}.demo{color:#000000;}

 

CODE:

这里的文字颜色受全局定义的影响

这里的文字颜色受类demo定义的影响

这里的文字颜色受类demo定义的影响

知道了样式的权值，你就知道上面例子的表现是怎样的了。进一步的应用，就是模块化了。

再来说说“作用域”，相信大家很容易就会想到“全局”、“公共”这些词，关注过模块化的同学应该都知道，网上说得最多的一种“模块化”，就是像 header、footer这样的以大区域划分。在去年web标准交流会（页面重构合理化讨论）上，克军提出了“样式的三层架构”——公共规则层、公共模 块层、项目层。这些都有它们适用的范围，而且最大的优点是容易理解和应用。这里也不再作重诉了，上面已经讲过。

我在这一块的划分上，有点类似克军的“样式的三层架构”，有一点小的差别，我是以“作用域”来分的： 公共级（全局）、栏目级 （局部公共）、页面级 。如何划分这个“作用域”呢？很简单，全局的global就是公共级的；只在栏目中用到的局部global是属于栏目级的；只影响单个页面的就是属于页面 级的了。

最后几点要特别注意的：

除了标签选择器之外，哪些类是使用于公共级、栏目级中的，如

 CODE:

.tx_hit{color:#FF0000 !important;}

的适用范围是公共级的，应该放于全局的定义中。但，如果它只影响于某个栏目，那么就应该把它放于栏目级的作用域中。

● 标签选择器一般属于栏目定义，有时会用于公共级作用域中，除了最基础的reset之外，应尽可能少使用在公共级定义中

● 可继承的属性定义使用时须注意影响的范围，特别是在标签选择器中使用时

● 同类选择器无加权

接下来的内容就是以这个为基础的，希望大家能理解“样式的作用域”，对于后继内容的理解会很有帮助。

6.2 栏目级作用域──页面重构中的模块化设计（二）

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

页面级

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

栏目级（局部公共）

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

 CODE:

/* 只影响demo这个区域 */

.demo a{...}

.demo p{...}

.demo .title{...}

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

样式定义所在样式文件中的位置。（同样的一个定义，放在不同的位置，所影响的范围会有所不同。）

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

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

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

CODE:

/* S 栏目级定义 */

.class{...}

/* E 栏目级定义 */

/* S 页面级定义 */

.page{...}

/* E 页面级定义 */

 

6.3 继承──页面重构中的模块化设计（三）

前面我们了解了 样式的作用域的分类 和 栏目级作用域。在权值中，还有一个很重要的因素，需要做下补充，起因是这样的，有个同学在CSS森林群里问了个问题：根据样式权值两个关键的因素

权值的大小跟选择器的类型和数量有关

样式的优先级跟样式的定义顺序有关

可以知道，如果10个标签选择器的权值应该比一个类选择的权值高，像这样：

 CODE:

div div div div div div div div div div div{color:blue;}

.c10{color:red;}

 

CODE:

  

    

      

        

          

            

              

                

                  

                     

这段文字是什么颜色？