Atitit OOCSS vs bem

Atitit  OOCSS vs bem

 

 

1. 今天最流行的CSS开发框架技术当属OOCSS，尽管还有其他类似的技术存在，如BEM。1

2. CSS设计模式：OOCSS 和 SMACSS1

2.1. OOCSS2

2.2. 减少对 HTML 结构的依赖2

2.3. 增加 CSS class 重复性的使用2

2.3.1. 减少对 HTML 结构的依赖2

2.3.2. 增加 CSS class 的重复使用3

3. OOCSS4

3.1. 减少对 HTML 结构的依赖4

3.2. 增强 CSS 样式的复用性5

4. 跟bem一达使用6

 

1. 今天最流行的CSS开发框架技术当属OOCSS，尽管还有其他类似的技术存在，如BEM。

2. CSS设计模式：OOCSS 和 SMACSS

真心觉得写出 CSS 并不难，但是要写出可被维护的 CSS 比其他程式语言都还难。所幸已经有许多大师级的人物，提出许多设计模式和思维，借由站在巨人的肩膀上可以让事情事半功倍。这篇文章就来说说 OOCSS、SMACSS 和撰写 CSS 时应该注意的规范。

作者::  ★(attilax)>>>   绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ） 汉字名：艾龙，  EMAIL:1466519819@qq.com

转载请注明来源： http://www.cnblogs.com/attilax/

（本文的例子用的是 SCSS 语法）

2.1. OOCSS

OOCSS 不是什么新技术，只是一种撰写 CSS 的设计模式，或者可以说是一种「道德规范」，大致上我觉得重点只有两个：

2.2. 减少对 HTML 结构的依赖

2.3. 增加 CSS class 重复性的使用

2.3.1. 减少对 HTML 结构的依赖

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 所提倡的用法。

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

2.3.2. 增加 CSS class 的重复使用

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

3. OOCSS

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

3.1. 减少对 HTML 结构的依赖

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

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