六种组织CSS的方式

Ben Frain曾经说过，写css代码很容易，可是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。

OOCSS

OOCSS 意为面向对象的CSS。这种方法有两种主要 观点:

• 结构与设计分离
• 容器和内容分离

使用这套结构，开发者能获得能够在不一样地方使用的通常类。

在这一步，会存在两点（一般就好和坏）：

• 好: 经过重复利用减小代码量 (DRY原则)。
• 坏: 组合使用。当你改变一个特定元素的样式, 你须要改变的颇有可能不只仅是CSS（由于大可能是类都是公共的），并且还会添加新的类。

此外，这种OOCSS的方法自己并无明确的规则，而是抽象的建议，因此这种方法在生产中的结果会有不一样。

实际结果就是，这种OOCSS的思想启发了其余人建立出属于他们本身更具体的代码结构。

SMACSS

SMACSS 意为可扩展、模块化（Scalable and Modular Architecture）的CSS。这种方法的主要目的是减小代码量，而且使代码维护更简单。

Jonathan Snook将样式分为了5个部分:

1. Base rules. 这些是主要的网页元素样式 - body, input, button, ul, ol等。在这部分, 咱们主要使用
   HTML标签和属性选择器, 特殊的状况下使用 - 类 (例如， 你有JavaScript的样式选择);
2. Layout rules. 这些是全局元素的样式，好比<caption> <footer> <sidebar>的尺寸等。Jonathan建议在这些元素中使用id选择器，由于这些元素在页面中不会出现超过一次。然而，这篇文章的做者认为这并非好的作法。(在样式文件中，无论id何时出现，都会在其它的某个地方形成些麻烦).
3. Modules rules.在单个页面中，块会被屡次使用。对于模块的分类，并不建议使用id和标签选择器（分别为了重复使用和上下文独立性）。
4. State rules. 在这一部分，规定了模块的不一样状态和网页基础，这是惟一可使用关键字!Important 的地方。
5. Theme rules. 设计你可能须要更换的样式。

另外，还建议对属于某个特定分组的类设定命名空间，并为JavaScript中使用的类使用单独的命名空间。

这种方法使得编写和维护代码都更加容易，而且吸引了不少开发者。

Atomic CSS

使用Atomic CSS，为每个可重用的属性建立一个单独的类。好比 margin-top: 1px;就能够建立一个类 mt-1，width: 200px;能够建立一个w-200。

这种风格容许经过重复声明来尽量减小代码，而且改变模块样式也相对容易，for example, when changing a technical task.

然而，这种方法也有很大的缺点：

• 类名都是描述性的属性名，而不是对元素自己的语义化描述，有时会使得开发复杂化。
• 直接在HTML中显示设置。

由于这些缺点，这种方法遭到了大量批评。可是，这种方法对于大型项目而言，仍是颇有效的。

此外Atomic CSS也被用在不一样的框架里来指明矫正元素样式，还有一些其它方法的展示层。

MCSS

MCSS是多层CSS。这种书写代码的风格建议将样式分为几个部分，称为层（layers）。

• 底层（Zero layer or foundation）。这层代码负责重置浏览器样式（好比reset.css 和
  normalize.css）;
• 基础层（Base layer）包含网站重复使用的元素的样式：按钮、文本输入框等。
• 项目层（Project layer）包含单独的模块和一个“上下文”——根据客户端浏览器，查看站点/应用程序的设备，用户角色等对元素的修改。
• 修饰层（Cosmetic layer）代码是OOCSS的风格，对元素的外观作一些小的修改。建议只保留影响元素外观，但不会破坏网站布局的样式（好比颜色和不重要的缩进）。

层级之间的交互层次是很重要的：

• 基础层（base layer）定义中性样式，不影响其余层。
• 基础层（base layer）的元素只会影响本层的类。
• 项目层（project layer）的元素能影响基础层和项目层。
• 修饰层（cosmetic layer）是以描述性OOCSS类（“atomic”类）的形式设计的，而且不会影响其余的CSS代码，可选择性的用于标记当中。

AMCSS

AMCSS就是"Attribute Modules for CSS（css的属性模块）"。

让咱们看一个例子:

<div class="button button--large button--blue">Button</div>

这样一个类的链并不简单，因此让我经过属性来组织这些值。

结果以下:

<div button="large blue">Button</div>

为了不命名冲突，添加命名空间到属性上是个好主意。而后，咱们的按钮就变成了下面的样子：

<div am-button="large blue">Button</div>

若是你使用验证器检查代码，会发现并无am-button这个属性，因此能够在属性名称前加上data-。

使用一个不为人知，做为class属性的选择器"~ =" (IE7+)：该选择器选择属性值包含指定单词的元素，用空格分隔。因此，这种class~="link"的选择器相似于a.class.button这样的选择器。即便专门使用，由于class选择器也只是该属性选择器的特殊状况。

所以，CSS代码

.button {...}
.button--large {...}
.button--blue {...}

转换为

[am-button] {...}
[am-button~="large"] {...}
[am-button~="blue"] {...}

若是你以为这样的代码不常见，也可使用不那么激进的AMCSS形式：

<div am-button am-button-large am-button-blue></div>

FUN

FUN 表示选择器的扁平结构（Flat hierarchy of selectors），功能样式（Utility styles），命名分割组件（Name-spaced components）。

每一个字母后面都有特定的原则：

• F, flat hierarchy of selectors: 建议使用类来选择元素，避免无用的串联，而且不使用id。
• U, utility styles: 鼓励建立atomic风格的服务来解决典型的拼凑任务，好比 w100表示width:
  100%;，fr表示float: right;
• N, name-spaced components: Ben建议添加命名空间来指定特殊的模块元素的样式。这种方法避免了类名的重叠。

一些开发者注意到使用这种原则来书写和维护代码是至关方便的；在某种程度上，做者拿出了最好的成果，而且以一种简洁的方式展现了这项技术。

这种方法对项目和代码结构还有不小要求，它只创建记录元素的首选形式和标记使用的方法。可是在小项目中，这些规则足够建立出足够高质量的代码。

总结

正如你所见，这些方法里并无一个完美的。这些方法中没有一条绝对的规则——你能够从开始使用一套方案来建立你本身的东西， 或者从头开始建立一条新的方法。