Atitit OOCSS vs bem

2019年12月20日 阅读数:46
这篇文章主要向大家介绍Atitit OOCSS vs bem,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

Atitit  OOCSS vs bemcss

 

 

1. 今天最流行的CSS开发框架技术当属OOCSS,尽管还有其余相似的技术存在,如BEM1html

2. CSS设计模式:OOCSS 和 SMACSS1前端

2.1. OOCSS2git

2.2. 减小对 HTML 结构的依赖2程序员

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

2.3.1. 减小对 HTML 结构的依赖2设计模式

2.3.2. 增长 CSS class 的重复使用3框架

3. OOCSS4网站

3.1. 减小对 HTML 结构的依赖4ui

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