怎样去写 CSS？

Atomic CSS

什么是 Atomic CSS？

Atomic CSS 是一个单一用途的样式集合（最大程度上重用单一职责原则），非常适合在使用组件的模板框架中使用，比如 React，Angular。
Atomic CSS 的相关样式是不可改变的，无论你在哪个项目，都会使用相同的类。

Atomic CSS 的优缺点

优点：

将 CSS style 最小元件化，重用性最大化。相同的属性的 class 只会声明一次，由此确保 stylesheet 的最小化。可以让整个项目重复使用。
例如：

<div class="D(ib) W(100px)">
</div>

使用 Atomic CSS 的工具可以将上述 class name 解析为：

.D\(ib\) {
  display: inline-block;
}
.W\(300px\) {
  width: 100px;
}

这样子有点类似于在写 inline style，只不过是用 class name 来表示而已。

相比较 inline style 的写法，这种写法更加简洁，而且也不存在命名冲突。
HTML element 的 style 非常易懂。
通过上述例子可以看出，这样写可以直接通过 HTML 来看出元素的样式是怎样的，而不需要切换到 CSS 文件再去查看。
产生的 stylesheet size 更小，项目越大，省下的容量越大。

缺点：
这个缺点比较因人而异，就是会写出来像 style 的 class，会有人觉得这样没有语义化，看着不直观。在我看来，如果项目中大家都达成了共识，理解这些代号应该也不难，这样写也就不存在什么问题了。

BEM(Block, Element, Modifier)

什么是 BEM？

BEM 将网页组成分为 Block，Element 和 Modifier。通过遵循一套严格但合理的命名规范使得你的 class 保持一个较好的可读性和维护性。

块（Block）：是一个独立并可以重复使用的页面的元件，通常 web 开发中国所说的组件或模块，每个块在逻辑上和功能上是相互分开的，命名如果有需要则使用-来串接。例如，.search-field{...}。
元素（Element）：是 block 中不可分离的一个小元件，一定存在于 block 之下，但是 block 不一定有 element，以 block 的名字作为前缀，使用两个下划线__来串接。例如，.search-field__button{...}。
修饰符（Modifier）：用来定义 block 或者 element 的状态或者属性。可以有多个 modifier 同时存在于 block 或 element 中。命名以 block 或者 element 的名字作为前缀，使用一个下划线_来串接。例如，.search-field__button_hover{...}

BEM 的优缺点

优点：方便合作开发，易于别人读懂你的代码，便于维护。
缺点：类名可能会比较长且复杂，但是其实在明白了命名规则以后就会发现，会很容易理解其含义。

OOCSS(Object Oriented CSS)

什么是 OOCSS？

OOCSS 是一种容易重用的 CSS 设计规则。

OOCSS 的特点

独立的结构和样式
把布局样式和设计样式独立出来，在没有将结构和样式分离的 CSS 可能会长这个样子。
```
#button {
  width: 100px;
  height: 50px;
  border: solid 1px #ccc;
  background-color: black;
}

#box {
  width: 300px;
  height: 100px;
  border: solid 1px #ccc;
  background-color: black;
}
```
上述定义的两个样式都是 id 选择器定义的样式，无法复用，但是可以发现，他们有一些共同的样式，这些样式有可能是由于网页的整体设计而产生的，所以我们就可以将这些公用的样式抽出来。

抽出来后的样式如下：
```
.button {
  width: 100px;
  height: 50px;
}

.box {
  width: 300px;
  height: 100px;
}

.skin {
  border: solid 1px #ccc;
  background-color: black;
}
```
这样，样式就可以达到复用的目的了，即样式与结构分离。
独立的容器和内容
把内容从容器中分离出来，比如应该用 <h2 class="XXX"> 来替代 .myObject h2 {}。
这样子我们可以保证，所有没有类的容器，比如 h2 看起来都是一样的，所有用了相同类的容器看起来都是一样的。

OOCSS 的优缺点

优点：

更快的网站。最大程度的复用代码，减少重用代码，可以让文件体积更小，从而可以更快的下载资源。
代码易于维护。

缺点：OOCSS 更适用于一些较大的网站，网站越大优点越明显，有人会觉得在一个小项目用 OOCSS 有点大材小用了，不过这也因人而异吧。

注意：基于 OOCSS 的样式大量的基于 css 类名建立，尽量避免使用 id 选择器。