Atitit OOCSS vs bem

通常的导航栏写法，结构应该会像上面的 HTML 范例同样，若是要对那些 <a> 标签订义样式，CSS 的写法可能写成.nav--main ul li a {}，这种写法先无论效能上的问题，能够看出来过分地依赖元素标签的结构，有可能以后 HTML 结构改变，这个 CSS 就必须跟著重构，形成维护上多余的成本。

若从这个例子来考量，原则上 <a> 都必定会接在 <li> 标签的后面，一个 <li> 只会有一个 <a>，一般不会独立存在，那就能够写成 .nav--main a {}，会是比较好的写法，甚至是直接给 <a> 加上 class nav--main_item。后者是 OOCSS 所提倡的用法。

这样的写法，一来效能理论上比较好（我没办法验证），二来层次比较单纯。

2.3.2. 增长 CSS class 的重复使用

在 OOCSS 的观念中，强调重复使用 class，而应该避免使用 id 做为 CSS 的选择器。这种想法就是像
OOP
尽可能抽离重复的程式码，例如如下这个例子，这是两种按钮的 CSS 样式属性：

.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 而已。

3. OOCSS

OOCSS,字面意思是面向对象的CSS，是由Nicole Sullivan提出的css理论,虽然说是理论，实则更像一种程序员间约定的规范：
* Separate structure and skin（分离结构和主题）减小对 HTML 结构的依赖
* Separate container and content（分离容器和内容）增长样式的复用性

3.1. 减小对 HTML 结构的依赖

<ul>

</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的方式来控制解耦

3.2. 加强 CSS 样式的复用性

在 OOCSS 的观念中，强调重复使用 class，而应该避免使用 id 做为 CSS 的选择器。

以BootStrap为例(BootStrap即是根据OOCSS规范写的),如下为LESS文件:

OOCSS追求元件的复用，其class命名更为抽象，通常不体现具体事物，而注重表现层的抽取.

这样的写法能有效提升页面的可维护性，结合LESS和SASS等预编译语言更是有无穷的力量，这是若是咱们须要改变整个页面label的大小，咱们也许只须要改变一下基础类.label上的样式即可以了。

4. 跟bem一达使用

使用class not id选择器

Bem结构...

元素的名称使用上下文短名称..

class命名更为抽象，通常不体现具体事物，而注重表现层的抽取.

CSS设计模式：OOCSS 和 SMACSS - 博客 - 伯乐在线.html

CSS开发框架技术OOCSS编写和管理CSS的方法_CSS教程_前端技术.htm