一个好的架构所需的4个标准：
- 类必须尽量少地添加，避免HTML膨胀
- 可以立即知道组件是否使用Javascript
- 可以立即知道是否可以安全的编辑一个类而不会影响其他
- 立即知道每个class是适用于什么，以防大脑过载
Bem规范 [block-element-modifier]
.block { /*styles*/} // 块
.block __element { /*styles*/} // 元素
.block-- modifier{ /*styles*/} // 修饰符
eg:
<button class=".btn .btn--primary"> 块 & 修饰符</button >
<button class=".btn .btn--default"> 块 & 修饰符</button >
<form class="form">
<div class="form__row">元素</div>
</form>
Tips：
Bem规范可以使class的数量尽量少。
可立即知道一个class放在这个伟大工程的哪边，以防大脑过载。
尽量不要链式命名BEM元素 比如：.commnets__commet-title。
命名空间
-
.l- 布局
面向对象的CSS（OOCSS）：表层与结构的分离。
即影响块或其元素的属性应该被抽象为一个单独的类用于重复利用。
在CSS中，定位块的行为也称为布局块。
我们可分为全局布局 & 块级布局。全局布局是应用于所有页面的布局,每个块（对象或组件）有自己的布局。
<div class='l-container'>
<form class='l-form'>
<formItem class='l-form__item l-form__item--large'>
</form>
</div>
.o- 对象
最小构建块，它们里面不能包含其他对象或组件。比如button
对象独立于上下文，不会改变网站结构，即不能包含以下属性：absolute 和 fixed定位
margin
padding
float 等
.c- 组件
组件可以任何位置可以引用的，可以注意下响应式。.js javascript的钩子
表示该对象/组件是否需要JavaScript
<div class='o-time jsCount'/>
-
.is-/.has- 状态类
表示对象/组件的当前状态， 当应用状态类时，可以立即知道对象/组件是否具有下拉（.has-dropdown）或当前处于打开状态(.is-open)
.object { &.is-animating { /*styles*/}}
.t或.s 排版类
.t1- 最大的字体大小。.t2- 第二大字体大小。.s1- 第一字体大小较小的基本字体大小.u- 实用类
通常只包含一个属性，并且包含!important声明。
相关参考：
编写模块化CSS：BEM
编写模块化的CSS:命名空间 © w3cplus.com
