#### SMACSS是一种css的设计模式
###### SMACSS定义了五种样式类型：
1. Base (基本)
2. Layout（布局）
3. Module (模块)
4. State (状态)
5. Theme (皮肤)
#### Base(基本)
在项目中我们一般使用reset.css，用来重置元素的基本样式(颜色、排版、外距和内距等)。
#### Layout(布局)
在我们的方法中不是基本样式和全局的类名而是模块。
SAMCSS规划了主要布局组件(如，页头header，侧栏sidebar，网格grid等等)和其他的一切。我们发现这种区别有几个不必要的因素：
模块通常用展示他们的子组件，同样的方式主要的组件展示在页面上。
即使我们100%确定组件将永过不会被重用，因此和可重用的组件相比没有任何好处。
布局和模块之间的界线太模糊了，布局做为一种特殊的类别保留下来是很价值的。
#### Module(模块)
模块是独立的，可重用的组件，哪怕是不知道它们的父容器。他们唯一的依赖关系是应用基本样式。当它不在需要时，我们可以安全的删除模块，而不什么影响我们的CSS。
BEM双下划线语法用于一个模块的子组件范围中，我们使用CSS子选择器随意适合深度的适用性。
BEM双连字符语法作为修饰符来表示子类，或和关键字is-、模块的具体状态相结合。
因为设置模块的宽度width，定位position，外距margin都需要上下文出现的相关因素，我们的模块要么是全屏的块元素要么是内联元素。
这里有一个示例（modules/_my_module.scss）：
```css
.my-module {
background-color: maroon;
position: relative;
> a {
color: aqua;
}
}
.my-module--important {
@extend .my-module;
border: 3px solid fuchsia;
}
.my-module--is-active {
background-color:red;
}
.my-module__close-button {
position: absolute;
right: 0;
top: 0;
}
```
除了position和尺寸相关属性外，大多数子组件可以提取出自己独立的模块。所以如果你离开定位到父元素，我们可以设置为三个小的、独立的模块。
modules/_my_module.scss:
```css
.my-module { //...
}
.my-module__child-component {
width: 100px;
}
```
modules/_child_component.scss:
```css
.child-component { //...
}
.child-component__grandchild-component {
position: absolute;
top: 10px;
}
```
modules/_grandchild-component.scss:
```css
.grandchild-component {
//...
}
.grandchild-component--modifier {
//...
}
```
example.html:
```html
<div class="my-module">
<div class="my-module__child-component">
<div class="child-component">
<div class="child-component__grandchild-component">
<div class="grandchild-component--modifier">
</div>
</div>
</div>
</div>
</div>
```
.grandchild-component和.child-component独立于他们的父容器。这个模块是用于他的子容器定位。这样做好处是嵌套的UI组件彼此完全脱离。
#### State(状态)
模块的具体状态作为模块的本身被定义在相同的文件中(如上面的.my-module--is-active)，但我们要保持全局状态类的分离，如.is-hidden。
#### Theme(皮肤)
我们通过在一个配置文件中设置变量的设置来实现站点的特定风格。
