前端多人项目时，每个人对css的编写有着不同的考虑， 因此常常会导致在Dom中不同风格的class命名、重复编写的CSS块、项目主体色变量的各处定义和引用（导致修改时多处寻找和调节）...等问题。
因此特意来整理了前端开发中部分关于代码组织和管理规范方式：OOCSS、 ACSS、BEM、SMACSS
一、OOCSS
Object Oriented CSS
1. 是什么
bootstrap就是典型的面向对象css，即oocss.
面向对象的CSS是一种容易重用的一种CSS规则，这里关键的一点就是如何在页面中识别，创建和模块化可重用的对象，并在页面中任何需要的地方重用，并扩展其附加功能。所以我的理解是，oocss是一种可重用，样式分离，耦合度低的css.
2. 如何使用
//css写法
.title-1{
border-bottom:1px solid #ccc;
font-size:16px;
font-weight:bold;
color:#333;
}
//OOCSS写法
.bb-c{
border-bottom:1px solid #ccc;
}
.f16{
font-size:16px;
}
.bold{
font-weight:bold;
}
.c333{
color:#333;
}
//html
<div class="f16 bold c333 bb-c">标题</div>
3. 评价
- 优点：
- 强调重用，减少CSS代码
- 选择器简洁
- 可扩展类
- 强调风格与内容分离
- 强调内容与容器分离
- 具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系
- 语义标记，有助于SEO
- 可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件
- 缺点：
- OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。
- 如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
- 最好给每一个组件备写一份说明文档，有助于调用与维护
- 创建了数千行CSS，但有可能这些CSS永远不会被使用。比如Twitter Bootstrap
- 样式(CSS)和结构(HTML)藕合太紧
二、ACSS
原子化CSS(Atomic CSS)
1. 是什么
ACSS 的原则是把 CSS 样式打散成尽可能小的部分，每个 CSS 类只对应一条样式规则，从而达到最大化的可复用性。比如 CSS 类 M(10px)所对应的样式规则是 margin: 10px。在应用 CSS 样式时，只需要在把所需要的原子化 CSS 类名添加到 DOM 元素上即可。ACSS 提供了 Atomizer 工具来生成最终的 CSS 样式文件。
2. 如何使用？
在 HTML 页面中，按照 ACSS 的命名方式添加所需要的原子化 CSS 类名，再使用 Atomizer 工具来解析 HTML 页面并生成对应的 CSS 文件。使用 ACSS 的多媒体对象示例:
<div class="BfcHack M(10px)">
<a href="http://oocss.org/" class="Fl(start) Mend(10px)">
<img src="https://placehold.it/50x50"/>
</a>
<div class="BfcHack">
OOCSS media object
</div>
</div>
// css
.Fl\(start\) {
float: left;
}
.M\(10px\) {
margin: 10px;
}
.Mend\(10px\) {
margin-right: 10px;
}
.BfcHack {
display: table-cell;
width: 1600px;
*width: auto;
zoom: 1;
}
3. 评论
- 优点：
- 所生成的css文件只包含必要内容，较少冗余。
- 减少css文件大小，提高性能
- 将 class name 定义最小化，让全站都可复用
- 通过 atomic css 的打包，只会产生用到的样式
- 比起 inline 的方式更加简单，不会冲突
- 很好压缩，整体 size 小一点
- 缺点：
- 它与大多开发人员所理解的最佳实践差异很大，可能难接受
- 写起来丑
- 没有语义化
三、BEM
BEM代表块（Block），元素（Element），修饰符（Modifier）。
1. 是什么？
Block 是页面中独立存在的区块，可以在不同场合下被重用。每个页面都可以看做是多个Block组成。
Element 是构成Block的元素，只有在对应Block内部才具有意义，是依赖于Block的存在。
Modifier 是描述Block或Element的属性或状态。同一Block或Element可以有多个Modifier。
饿了么的框架elementUI就是BEM的一种
2. 如何使用？
命名规范：
-
-中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。 -
__双下划线：双下划线用来连接块和块的子元素 -
_单下划线：单下划线用来描述一个块或者块的子元素的一种状态
BEM 命名约定的模式如下：
.block {}
.block__element {}
.block--modifier {}
每一个 Block 名应该有一个命名空间（前缀）
-
block代表了更高级别的抽象或组件 -
block__element代表block的后代，用于形成一个完整的block的整体 -
block--modifier代表block的不同状态或不同版本
下划线和横线
component-name
component-name--modifier-name
component-name__sub-object
component-name__sub-object--modifier-nam
驼峰
org-ComponentName
org-ComponentName--modifiername
org-ComponentName-subObject
org-ComponentName-subObject--modifiername
由于市场存在块嵌套另一个块的问题， 可以使用前缀来区分
p-页面（Page） （应用于body元素的类）,对可维护性不是那么重要的静态页面十分有用 —应该避免嵌套使用 (例: p-Homepage);
l-布局（Layout）, 比如列（columning），包裹（wrappers） 和容器（containers）等等(例: l-Masthead, l-Footer);
c-组件（components ）(例: c-Dropdown, c-Button…);
u-公共类（Utility classes） — 不会发生改变, 在代码的任何地方都不能重载。(例: u-textCenter, u-clearfix…);
js-JavaScript钩子：永远不应该出现在CSS中。
g-JavaScript钩子：全局js类，永远不应该出现在CSS中
<div class="c-card">
<div class="c-card__header">
<h2 class="c-card__title">Title text here</h3>
</div>
<div class="c-card__body">
<p>I would like to buy:</p> <!-- Much nicer - a layout module -->
<ul class="l-list">
<li class="l-list__item"> <!-- A reusable nested component -->
<div class="c-checkbox">
<input id="option_1" type="checkbox" name="checkbox" class="c-checkbox__input">
<label for="option_1" class="c-checkbox__label">Apples</label>
</div>
</li>
<li class="l-list__item">
<div class="c-checkbox">
<input id="option_2" type="checkbox" name="checkbox" class="c-checkbox__input">
<label for="option_2" class="c-checkbox__label">Pears</label>
</div>
</li>
</ul> <!-- .l-list -->
</div> <!-- .c-card__body -->
</div> <!-- .c-card -->
3. 评论
- 优点：
- 解决了命名空间的问题
- 多人协作时，只要有文档清楚标注规则，后来人可以很轻易的读懂，接手
- 更易于维护
- 缺点：
- 容易写的又长又丑
- 代码量比较多，没这么简洁
- 需要完善的说明文档和规则
四、SMACSS
表示的是可扩展和模块化 CSS（Scalable and Modular Architecture for CSS）。
1. 是什么
SMACSS 把 CSS 样式规则分成若干个不同的类别：
- 基础：该类别中包含的是默认的 CSS 样式。作为其他样式的基础。
- 布局：该类别中包含与页面布局相关的 CSS 样式，用来进行模块的排列。
- 模块：该类别中包含的是可复用的模块的 CSS 样式。
- 状态：该类别中的 CSS 样式用来描述布局和模块在不同状态下的外观。比如在不同的屏幕尺寸下，布局会发生变化。标签式模块的每个标签页可以有显示或隐藏的状态。
- 主题：该类别和状态类似，只不过是用来改变布局和模块的视觉效果。
