标签：
Atitit OOCSS vs bem
1. 今天最流行的CSS开发框架技术当属OOCSS，尽管还有其他类似的技术存在，如BEM。1
真心觉得写出 CSS 并不难，但是要写出可被维护的 CSS 比其他程式语言都还难。所幸已经有许多大师级的人物，提出许多设计模式和思维，借由站在巨人的肩膀上可以让事情事半功倍。这篇文章就来说说 OOCSS、SMACSS 和撰写 CSS 时应该注意的规范。
作者:: ★(attilax)>>> 绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ） 汉字名：艾龙， EMAIL:1466519819@qq.com
转载请注明来源： http://www.cnblogs.com/attilax/
（本文的例子用的是 SCSS 语法）
OOCSS 不是什么新技术，只是一种撰写 CSS 的设计模式，或者可以说是一种「道德规范」，大致上我觉得重点只有两个：
|
1 2 3 4 5 6 7 |
<nav class="nav--main"> <ul> <li><a>.........</a></li> <li><a>.........</a></li> <li><a>.........</a></li> </ul> </nav> |
一般的导航栏写法，结构应该会像上面的 HTML 范例一样，如果要对那些 <a> 标签定义样式，CSS 的写法可能写成.nav--main ul li a {}，这种写法先不管效能上的问题，可以看出来过度地依赖元素标签的结构，有可能之后 HTML 结构改变，这个 CSS 就必须跟著重构，造成维护上多余的成本。
若从这个例子来考量，原则上 <a> 都一定会接在 <li> 标签的后面，一个 <li> 只会有一个 <a>，通常不会独立存在，那就可以写成 .nav--main a {}，会是比较好的写法，甚至是直接给 <a> 加上 class nav--main_item。后者是 OOCSS 所提倡的用法。
这样的写法，一来效能理论上比较好（我没办法验证），二来层次比较单纯。
在 OOCSS 的观念中，强调重复使用 class，而应该避免使用 id 作为 CSS 的选择器。这种想法就是像
OOP
尽量抽离重复的程式码，例如以下这个例子，这是两种按钮的 CSS 样式属性：
|
1 2 3 4 5 6 7 |
.button { display: inline-block; padding: 6px 12px; color: hsla(0, 100%, 100%, 1); &.button-default { background: hsla(180, 1%, 28%, 1); } &.button-primary { background: hsla(208, 56%, 53%, 1); } } |
上面的 CSS 将两种不同样式的 button，抽离出重复的部份，并且定义在同个 class
上。因此，要使用这样的样式，HTML 的写法可能长这个样子：
|
1 2 |
<a class="button button-default"> <a class="button button-primary"> |
先用 button 宣告此为一个按钮的样式，再用 button-default 或 button-primary 作为按钮底色的区别。这么做可以维护成本变得比较低，例如：想要改网站上所有按钮的大小，就只要修改 .button 的 padding 而已。
OOCSS,字面意思是面向对象的CSS，是由Nicole Sullivan提出的css理论,虽说是理论，实则更像一种程序员间约定的规范：
* Separate structure and skin（分离结构和主题）减少对 HTML 结构的依赖
* Separate container and content（分离容器和内容）增加样式的复用性
<div class="container-list">
<ul>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</div>
· 1
· 2
· 3
· 4
· 5
· 6
· 7
一般我们在书写列表的时候结构大概会如上面的结构所示，这种时候我们如果要对a修改样式可能经常会用.container-list ul li a这种方式来选择，一方面这种写法在效率上比较拙劣，另一方面一旦我们在项目后期过程中对列表中的html结构进行了重构，这意味着我们同时也需要对css进行重构，使html与css的耦合性变得十分强，造成维护上的困难，也要避免没必要的嵌套地狱
而OOCSS推荐的写法是在a标签内加上list-item样式,此时便能通过.container-list .list-item的方式来控制解耦
在 OOCSS 的观念中，强调重复使用 class，而应该避免使用 id 作为 CSS 的选择器。
以BootStrap为例(BootStrap便是根据OOCSS规范写的),以下为LESS文件:
OOCSS追求元件的复用，其class命名更为抽象，一般不体现具体事物，而注重表现层的抽取.
这样的写法能有效提高页面的可维护性，结合LESS和SASS等预编译语言更是有无穷的力量，这是如果我们需要改变整个页面label的大小，我们也许只需要改变一下基础类.label上的样式便可以了。
使用class not id选择器
Bem结构...
元素的名称使用上下文短名称..
class命名更为抽象，一般不体现具体事物，而注重表现层的抽取.
CSS设计模式：OOCSS 和 SMACSS - 博客 - 伯乐在线.html
CSS开发框架技术OOCSS编写和管理CSS的方法_CSS教程_前端技术.htm
标签：
原文地址：http://www.cnblogs.com/attilax/p/5346721.html
