将HTML和CSS通过一定的规则进行分类、组合,以达到特定 HTML、CSS在特定范围内最大程度的复用，这是模块化的核心。 一个优秀的模块应当具有高度的独立性（非入侵与防入侵）、良好的拓展性。统一可行的规范能保证团队产出优秀的代码，对于降低沟通、多人协作的成本也颇有益处，本文档借鉴了BEM/MVCSS/SMACSS等模块书写规范。
- 命名原则。 采用
小驼峰+BEM命名，为提高类名识别度，对于多单词的名称必须使用小驼峰命名； - 作用域封闭性原则。 模块的扩展、状态、情景，只对模块内部产生作用，不影响模块之外。
- 单向外边距原则。 为避免不必要的bug（外边距折叠等），对于模块中的组件单元如需使用外边距margin的，请遵循单向设置margin原则（推荐
margin-right与margin-bottom）；
命名规则： {命名空间}-{模块名}[__子类名]--[扩展类名]；
命名应当是具有语义化的，尽可能的让人看到名字就知道这是一个模块，并且了解模块的意图。
**理解：**把常用的模块的通用属性尽可能的抽离出来，封装为一个基类。
命名规则：{命名空间}-{模块名}，如：.ui-box{}、.mod-head{}；
**理解：**也就是BEM中的E，基类与子类的关系是父与子的从属关系。
命名规则：{命名空间}-{模块名}__{子类名}，如：.ui-box__bd{}、.mod-head__content{}；
这就意味着在同一个模块里，所有的子类都从属于基类，但并不等于说基类下面的所有子元素都是子类，这是使用BEM常见的一个误区。例如在一个表单模块里，表单的label是表单模块的子类，但输入框和按钮这些并不一定从属与这个表单模块，它们有可能出现其他地方，例如搜索框。
**理解：**当一个基类在不同位置使用时，有时会因为具体环境而需要在大部分展现上或小部分结构上调整，如果通过复制新建模块方式，会出现大部分代码冗余。这时可通过定义一个扩展类来解决。
命名规则：{命名空间}-{模块名}--{扩展类名}，假如基类为.mod-userCard{}，其扩展类可以是：
.mod-userCard--notice {} /* 扩展名为"notice" */
.mod-userCard--aside {} /* 扩展名为"aside" */
对于某些名称，如果它的简写已达成共识，则可以使用简写，如：
--xs (extra small)
--s (small)
--m (medium)
--l (large)
--xl (extra large)
--a (primary)
--b (secondary)
--c (tertiary)**理解：**当模块的某处存在动态的状态变化的时候，使用状态类。
**命名规则：**以is-为前缀，is-{状态名}，例如is-active、is-error；
由于同一个页面有可能会在不同的地方都需要出现is-active，并且各自的is-active的是不同的。所以不要单独使用is-active，而是使用.mod-userCard.is-active 或 .mod-userCard .is-active来定义状态。
需要兼容IE6的项目，对于模块父级可以使用{is + 模块名 + 状态名 [+ 派生类名]}来定义状态。例如模块为.mod-server，那么其状态可以为is-server-closed；对于模块.mod-server--A和.mod-server--B，如果他们的状态展现不同，状态类分别可以是.is-server-close--A和.is-server-close--B
**理解：**当模块的某处存在动态的状态变化的时候，使用状态类。
**命名规则：**以has-为前缀，has-{情景名}，例如has-dropdown、has-border；
与状态类一样，请不要单独使用情景类。