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

　　模块化设计我已经提过很多了，像《从宜家的家具设计讲模块化》、《页面重构中的模块化思维》、《页面重构中的组件制作要点》都是跟模块化相关的，不过之前一直没有讲到具体实现方面的内容，只是一些思维。这次重点讲一下实现方面的内容，权当到目前为止我对模块化的一些总结整理。
　　要做好模块化，我觉得理解好样式的作用域是很重要的，所以将这部分作为这个系列的第一篇。
　　写过程序的同学应该都知道，变量是有作用域的（不知道的同学自己去问谷歌，这里就不作解释了），样式的定义也同样存在着作用域的问题，即定义的作用范围，很容易就能理解，如下面的p的作用域：
　　viewplaincopytoclipboardprint？
　　作用域：全局p｛textindent：2｝
　　作用域：。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的重复定义，代码冗余。
　　从上面我们可以得出两个关键的因素：
　　权值的大小跟选择器的类型和数量有关
　　样式的优先级跟样式的定义顺序有关
　　了解样式的权值后有什么作用呢？比如可以这样用：举一个最简单的例子，
　　viewplaincopytoclipboardprint？
　　p｛color：555555；｝。demo｛color：000000；｝
　　viewplaincopytoclipboardprint？
　　这里的文字颜色受全局定义的影响
　　这里的文字颜色受类demo定义的影响
　　这里的文字颜色受类demo定义的影响
　　知道了样式的权值，你就知道上面例子的表现是怎样的了。进一步的应用，就是模块化了，比如《从宜家的家具设计讲模块化》中的例子，详细请移步。
　　再来说说“作用域”，相信大家很容易就会想到“全局”、“公共”这些词，关注过模块化的同学应该都知道，网上说得最多的一种“模块化”，就是像header、footer这样的以大区域划分。在去年web标准交流会（页面重构合理化讨论）上，克军提出了“样式的三层架构”公共规则层、公共模块层、项目层。这些都有它们适用的范围，而且最大的优点是容易理解和应用。这里也不再做重诉了，感兴趣的同学可以找找相关的文章。
　　我在这一块的划分上，有点类似克军的“样式的三层架构”，有一点小的差别，我是以“作用域”来分的：公共级（全局）、栏目级（局部公共）、页面级。如何划分这个“作用域”呢？很简单，全局的global就是公共级的；只在栏目中用到的局部global是属于栏目级的；只影响单个页面的就是属于页面级的了。