如何去组织你的CSS代码

一、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{
  ...
}

二、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>

三、参考文章

瞎扯扯OOCSS,ACSS,BEM,SMACSS