如何去组织你的CSS代码

1、Object Oriented CSS (OOCSS)

面向对象的 CSS。OOCSS 的想法首先要明白 CSS 的 “Object” 是个毛线玩意。

CSS的样式是需要应用到页面的结构上的。通俗的讲就是需要应用到HTML标签上。比如一个页面上的一个区域、控件、标签等，就是一个 Object ，大部分情况下，这种 Object 肯定是可以复用的。

常见的比如 Button按钮。视觉上就可能是一个图形按钮，然后我们可以在其上面添加各种样式，以获得我们想要的效果。

Tag : button
calss: btn

OOCSS 有个特点就是结构和样式是分开的，比如说一个渐变按钮，那么 .btn 的 class 是不会包含渐变相关的属性的，而是需要单独抽取出一个渐变的 class，然后让 .btn 去扩展从而得到一个渐变的按钮。

.btn {//结构
    ...
}
.btn.btn-info {//样式
    backgrond: green;
}
//这似乎有点像Bootstrap的味道

就像官方说的那样，一个 Object 包含了四个部分：

1. HTML ，会有一个到多个的 DOM 节点
2. CSS , 用来表示上述节点的样式， 这些样式都会以最外面的包裹层 Node 的 class Name 开始
3. 背景图片、或者其他的一些用来展示的资源组成的组件
4. Javascript 的事件，行为等。

另一个特点在于，OOCSS 认为 container 和 content 是需要隔离开的（这里的container只是将一块区域包裹起来，并不具有任何特殊的意义）。也就是说，尽量不要去使用依赖于节点结构位置的样式定义。比如这样的就是不允许的：

.video-container .title{
  ...
}

OOCSS 中会建议你直接这样去写：也就是直接去写这个元素。

.title{
  ...
}

2、Block,Element,Modifier(BEM)

BEM是一套严格但合理的命名规范使得你的 class 保持一个较好的可读性和维护性。方便合作开发，别人容易读得懂你的代码，你也容易维护好你的样式。

格式为：

.block{}
 
.block__element{}
 
.block--modifier{}

格式大约就是如上所属那样，当然，有一点需要注意，多层 DOM 节点的情况下正确的写法应该是这样的：

<div class="block">
    <div class="block__e1">
       <button class="block__e2"></button>
    </div>
</div>

Stackoverflow 上有个特别好的解释对于 BEM 的说法点这里查看

简单说，就是 html 是一个 DOM树，那么你在写样式的的时候就写成一个 BEM树一一对应就可以了。看例子：

html：

<ul>
  <li>
     <a>
       <span></span>
     </a>
  </li>
</ul>

DOM树中有如下四个节点：

ul
ul>li
ul>li>a
ul>li>a>span

那么对应的我们就可以设计出如下的 BEM class：

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link">
      <span class="menu__text"></span>
    </a>
  </li>
</ul>

3、参考文章

瞎扯扯OOCSS,ACSS,BEM,SMACSS