最流行的CSS代码组织和管理规范

面向对象的CSS-OOCSS(每个组件是一个对象，该对象有基础样式和特殊样式)

• Separate structure and skin（分离结构和主题,如布局和背景颜色写在不同的类中）减少对 HTML 结构的依赖
• Separate container and content（分离容器和内容，如字体颜色，按钮颜色不与布局的类写在一起）增加样式的复用性

1. 尽量不要使用标签选择器，一旦改变标签的层级结构，会使样式也要修改，尽量使用class选择器的嵌套
2. OOCSS追求元件的复用，其class命名更为抽象，一般不体现具体事物，而注重表现层的抽取.

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: @label-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

// Colors
// Contextual variations (linked labels get darker on :hover)

.label-default {
  .label-variant(@label-default-bg);
}

.label-primary {
  .label-variant(@label-primary-bg);
}

.label-success {
  .label-variant(@label-success-bg);
}

.label-info {
  .label-variant(@label-info-bg);
}

.label-warning {
  .label-variant(@label-warning-bg);
}

.label-danger {
  .label-variant(@label-danger-bg);
}

这里的label样式的重复部分先用一个样式.label抽离出来，这样我们在使用不同样式的label时便可以这样使用:

<a class='label label-danger'>label</a>

这时如果我们需要改变整个页面label的大小，我们也只需要改变一下基础类.label上的样式便可以了。

SMACSS（分成基础 布局 模块 状态 主题 五种样式类别，每个节点可能有五种样式，但不重叠）

• Categorizing CSS Rules（为css分类）
• Naming Rules（命名规范）
• Minimizing the Depth of Applicability（最小化适配深度）

SMACSS认为css有5个类别，分别是：

1 Base
2 Layout
3 Module
4 State
5 Theme or Skin

1. Base Rules， 基础规范,描述的是任何场合下，页面元素的默认外观。这里样式只会对标签元素本身做设定，不会出现任何 class 或id，但是可以有属性选择器或是伪类.

2. Layout Rules， 布局规范,元素是有层次级别之分的，Layout Rules属于较高的一层，它可以作为层级较低的Module Rules元素的容器。左右分栏、栅格系统等都属于布局规范。布局是一个网站的基本，无论是左右还是居中，甚至其他什么布局，要实现页面的基本浏览功能，布局必不可少。SMACSS还约定了一个前缀l-/layout-来标识布局的class。举个最普遍的例子。

   .layout-header {}
   .layout-container {}
   .layout-sidebar {}
   .layout-content {}
   .layout-footer {}
   

3. *Module Rules， 模块规范，SMACSS中的模块具有自己的一个命名，隶属于模块下的类皆以该模块为前缀

   .todolist{} 
   .todolist-title{}
   .todolist-image{}
   .todolist-article{}//按结构和内容命名
   .todolist-background-danger{} //按效果命名
   

4. State Rules， 状态规范,描述的是任一元素在特定状态下的外观。与OOCSS抽取修饰类的方式的不同，SMACSS是抽取更高级别的样式类，得到更强的复用性

   <div class="is-hidden">
       ...
   </div>
   //css
   .is-hidden{
       display: none;
   }
   

5. Theme Rules，主题规范,描述了页面主题外观，一般是指颜色、背景图。Theme Rules可以修改前面4个类别的样式，且应和前面4个类别分离开来（便于切换，也就是“换肤”）

命名规范

• Base Rules(不需要)
• Layout Rules用l-或layout-这样的前缀，例如：.l-header、.l-sidebar。
• Module Rules用模块本身的命名，例如图文排列的.media、.media-image。
• State Rules用is-前缀，例如：.is-active、.is-hidden。
• Theme Rules如果作为单独class，用theme-前缀，例如.theme-a-background、.theme-a-shadow。

最小适配深度原则

继承选择符是有用的，它可以减少因相同命名引发的样式冲突（常发生于多人协作开发）。但是，我们不应过度使用，在不造成样式冲突的允许范围之内，尽可能使用短的、不限定html结构的选择符。

BEM（模块 元素 状态 将第一种模式进行简化 从大对象到小对象）

Block

Block是页面中独立存在的区块，可以在不同场合下被重用。每个页面都可以看做是多个Block组成。

bem_block.jpg

Element

Element是构成Block的元素，只有在对应Block内部才具有意义，是依赖于Block的存在。

bem_element.jpg

Modifier

Modifier是描述Block或Element的属性或状态。同一Block或Element可以有多个Modifier。

命名规则

Block作为起始开头不同

Block 和 Element 用 两个底线（__）区隔开来

不同的 Modifier 则用 两个 dash（--） 区隔。

一个 dash（-） 则表示这个 class 不依赖任何 Block 或 Element，是个独立的存在，例如：.page-container 或 .article-wrapper。如:

.sidebar {/*block name*/
  .sidebar__left-section { 
    .sidebar__left-section--header {}
    .sidebar__left-section--footer {}
  }
}

​
三种设计模式都有共同的特点，那便是让html与css更好的解耦，抽取样式中可复用的部分，使你的html代码更具语义。了解这些设计模式无疑会使你的css代码更具模块化，多人协作的时候也能有效避免那些命名问题带来的困扰又或者说提供一些解决的思路。