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://blog.csdn.net/attilax

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

2.1. OOCSS

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

2.2. 减少对 HTML 结构的依赖

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

2.3.1. 减少对 HTML 结构的依赖

<ul>

</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 样式属性：

.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

Atitit OOCSS vs bem相关推荐

Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
Atitit..css的体系结构
Atitit..css的体系结构 1. Oocss 与 bem标准化1 1.1. 四种样式表及六种选择器1 1.2. 常用的css框架 amazeui bootstrap1 1.3. Css图标 ...
css 倒三角_倒三角结构：如何管理大型CSS项目
css 倒三角 by Luuk Gruijs Luuk Gruijs着倒三角结构:如何管理大型CSS项目 (The Inverted Triangle Architecture: how to ma ...
从零学web前端_从零到前端英雄（第1部分）
从零学web前端 I remember when I first started learning front-end development. I encountered so many artic ...
比较有名的CSS,优雅地写css
重置你的CSS样式使用CSS常量进行更快速的开发. /* # Dark grey (text): #333333 # Dark Blue (headings, links) #000066 # Mi ...
捍卫者usb管理控制系统_捍卫效用优先CSS
捍卫者usb管理控制系统 by Sarah Dayan 通过莎拉·达扬捍卫效用优先CSS (In Defense of Utility-First CSS) "Favor composit ...
React 开发中面临的九个重要抉择
抉择系列:在技术开发的过程中我们会面临着各种各样的抉择,我们在不同情境下该如何选择恰当的技术,这是本系列文章想要解决的问题. 在 React 开发的过程中我们常常会遇到一些抉择,下面我将选取其中一些个 ...
Airbnb 规范大全
想要Xmind版的请关注私聊我,写的很全了. 前端的基本都概括了. 命名编码规范驼峰式命名法介绍 · Pascal Case 大驼峰式命名法:首字母大写.eg:StudentInfo.Us ...
CSS Modules 基本用法
写在前面原本很早之前就想写这个文章,但是因为种种原因写了一半,一直放在也草稿箱里面.现在正好是大年三十的前一天,闲来无事刚好有时间把这个补全一下. CSS Modules顾名思义就是CSS ...
C语言多case自动跳出,C语言switch中case后跟随break语句
1.case后面的常量表达式实际上只起语句标号作用,而不起条件判断作用,即"只是开始执行处的入口标号". 因此,一旦与switch后面圆括号中表达式的值匹配,就从此标号处开始执行: ...

Atitit OOCSS vs bem