模块化的基本概念
1.什么是模块
模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。
模块化用来分割，组织和打包软件。每个模块完成一个特定的子功能，所有的模块按某种方式组装起来，成为一个整体，完成整个系统所要求的功能。
模块具有以下几种基本属性：接口，功能，逻辑，状态。功能，状态于接口等反映模块的外部特性，逻辑反映它的内部特性。
2.HTML页面构建
很多页面构建工程师都经历了这样几个阶段：第一个阶段是在一个css文件中把多个页面按自己的习惯，顺序从上往下编写样式，基本不考虑有无公用样式，以完成设计呈现为首要目的；
第二个阶段是提取不同页面中的通用样式，如公用颜色、图标、按钮等，实现一些基本元素的复用；
第三个阶段是提取公用功能模块，如导航、版权信息等，实现部分公用模块的复用。
上面的第三个阶段的方法已经包含了模块化的思想了，不少团队也都有一套成熟的模块化开发方案。
当决定使用模块化构建的工作方式时，遵循某些原则对模块化的顺利推进有很大帮助。
曾经有一篇关于面向对象css的文章指出，面向对象的css有两个主要原则：separate the structure from the skin,separate the container from the content。
第一个原则体现在模块化思想可以理解为，模块的设计制作和布局框架本身相分离，意味着你的模块不能只为某个布局而编写样式，像微博这类存在换肤功能的产品更是如此，如果模块在不同的皮肤样式下需要另写很多样式甚至是修改结构的时候，这个模块的制作就是失败的；
第二个原则说的布局与内容分离，布局中某个位置不必只能防止某种内容，反过来可以理解为某块的灵活性和复用性。
其次，遵守团队协作开发规范原则。这个规范可以包含文件目录结构、文件和样式命名规范、图片sprite规范、模块划分和调用规范等。例如，我们队文件目录深度的规定、公用样式使用规定、模块的样式名唯一性规定、模块文件名和样式名必须一致的规定等等，确保所有人产出的模块是统一、规范的。
按结构呈现形式划分模块的原则。 这一点和模块化编程有较大的区别，通常在编程开发时是以模块的功能来划分的，而在页面构建上，有时候不同功能的模块呈现的样式是一样的，为达到模块样式最大程度的复用，就不能按功能来划分模块，简单来说，哪些模块外观结构一样，我们就可以把它们归为一个模块，以微博右侧模块距离，”可能感兴趣的人”和”推荐应用”模块的外观是一样的，都是左侧一个图片、右侧文字和功能按钮，那它们就是同一个样式模块。
模块稳固性原则。我经常问新人一个问题，“你觉得怎样体现你写的代码质量高，比一般人好？”，大多数人会回答遵守语义化、减少不必要的嵌套、代码尽量精简。语义化和代码精简固然是评价质量的一个重要方面，但是我认为，代码是否考虑到数据便利的合理性，是否考虑到dom节点的可操作性、是否考虑到因扩展造成的抗破坏性，更能体现一个页面构建工程师的水平。
模块自适应原则。指的是任何一个模块，都尽可能实现宽度和高度的自适应，非特殊情况不要设置模块的宽高，采取这种原则制作出的模块具有很好的即插即用功能，是高效完成页面拼合工作的重要前提。试想如果每个模块都定义了宽度，那么在不同的布局上你就必须重新定义每个模块的宽高或边距等属性来适应当前布局。
margin-bottom原则。一般情况下，网页的布局都是从上到下的流式布局(多栏结构也可以看成各栏内的流式布局)。所以，我们可以为每个模块统一预设margin-bottom，达到统一间距的目的，避免出现有些模块设置上边距、有些模块设置下边距的情况发生。(左右间距通常是由布局框架的样式设置)
http://www.wufangbo.com/chong-gou-mo-kuai-hua/
1.样式的作用域
css样式的作用域:
/*作用域：全局*/
p{text-indent:2em;}
/*作用域：.demo这个类中*/
.demo p{color:#000;}在样式的作用域中，我们应该特别注意，样式的优先级。