网站模块化设计我已经提过很多了，像《 从宜家的家具设计讲模块化 》、《 页面重构中的模块化思维 》、《 页面重构中的组件制作要点 》都是跟模块化相干的，不过之前一直没有讲到具体实现方面的内容，只是一些思维。这次重点讲一下实现方面的内容，权当到目前为止我对模块化的一些总结收拾。

要做好网站的模块化，我感到懂得好样式的作用域是很重要的，所以将这部分作为这个系列的第一篇。

写过网站程序的同学应当都知道，变量是有作用域的（不知道的同学自己往问谷歌，这里就不作说明了），网站样式的定义也同样存在着作用域的标题，即定义的作用范畴，很轻易就能懂得，如下面的p的作用域：

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

/*作用域：.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的重复定义，代码冗余。

从上面我们可以得出两个关键的因素：

权值的大小跟选择器的类型和数目有关
样式的优先级跟样式的定义次序有关
懂得网站样式的权值后有什么作用呢？比如可以这样用：举一个最简略的例子，

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

<p>这里的文字色彩受全局定义的影响</p>
<div class="demo"><p>这里的文字色彩受类demo定义的影响</p></div>
<p class="demo">这里的文字色彩受类demo定义的影响</p>

知道了样式的权值，你就知道上面例子的表现是怎样的了。进一步的利用，就是模块化了，比如《 从宜家的家具设计讲模块化 》中的例子，具体请移步。

再来说说“作用域”，信任大家很轻易就会想到“全局”、“公共”这些词，关注过模块化的同学应当都知道，网上说得最多的一种“模块化”，就是像header、footer这样的以大区域划分。在往年web尺度交换会（页面重构公平化讨论）上，克军提出了“样式的三层架构”——公共规矩层、公共模块层、项目层。这些都有它们实用的范畴，而且最大的长处是轻易懂得和利用。这里也不再做重诉了，感爱好的同学可以找找相干的文章。

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

最后几点要特别注意的：

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

.tx_hit{color:#FF0000 !important;}的实用范畴是公共级的，应当放于全局的定义中。但，假如它只影响于某个栏目，那么就应当把它放于栏目级的作用域中。
标签选择器一般属于栏目定义，有时会用于公共级作用域中，除了最基础的reset之外，应尽可能少应用在公共级定义中
可持续的属性定义应用时须注意影响的范畴，特别是在标签选择器中应用时