为什么需要分层？
- CSS有语义化命名的约定和CSS层的分离,有助于它的扩展性，性能的提高和代码的组织管理。
- 大量的样式，覆盖、权重和很多!important，分层可以让团队更方便的去维护。
- 有责任感的去命名你的选择器
1.CSS分层的规范
- SMACSS
- BEM
- SUIT
- ACSS
- ITCSS
2.SMACSS
可扩展的模块化架构的CSS，像OOCSS一样以减少重复样式为基础。
SMACSS一般使用五个层次来划分CSS层次。
Bse：设定标签元素的预设值。
Layout：整个网站的大架构的外观。
Module：应用在不用页面公共模块。
State：定义元素不同的状态。
Theme：画面上所有主视觉的定义。
3.BEM
B：更高级的抽象或者组件（Block）。
E: Block的后代，块里的元素标签（Element），用于形成一个完整的整体。
M: 修饰状态（Modifier）
<ul class="menu">
<li class="menu__item">...<li>
<li class="menu__item_state_current">...<li>
</ul>
4、SUIT
起源于BEM，不同的是对组件使用驼峰式和连字号把组件从他们的修饰和子孙后代中区分出来：
修饰符使用--，子模块使用__
5.ACSS
.m-10{
margin:10px;
}
.w-50{
width:50%;
}
6.ITCSS
Settings：全局可用配置，设置开关。
Tools：通用工具函数。
Generic：通用基础样式。
Base：未归类的HTML元素。
Objects：设计部分开始使用专用类。
Components：设计符合你们的组件。
Trumps：重写，只影响一块的DOM。
$color-ui:#FFFFFF;
$spacing-unit:10px;
@mixin font-color(){font-color:$color-ui;}
