1.简介

OOP已在JavaScript和后端语言中得到广泛使用，不止是JS才会有OOP面向对象模式，CSS中的OO写法到现在已经不是一个新概念（2008年由 Nicole Sullivan 提出，目标是通过应用Java和Ruby等变成语言普及的面向对象设计原则，是动态CSS更易于管理）。

OOCSS，是 Object Oriented css 的缩写，旨在用最简单的方式编写CSS代码，从而提高代码重用性、可维护性、可扩展性。

其实在项目中写CSS或许已经有了OO的概念，但是还没有一个完整的体系来规范CSS，所以学习OOCSS很有必要。

惯例，先贴上官网：http://oocss.org/

2.优缺点

2.1 优点

（1）高度重用，CSS代码简洁，便于维护，而且文件加载速度会更快，CSS代码在站点页面中调用的比重增大则有希望被复用或被浏览器缓存。
（2）能轻松构造新的页面布局，或制作新的页面风格。

2.2 缺点

（1）不适用小项目。适用于重复组件多、样式多的大型网站项目，小型项目代码少，优势不明显。
（2）学习成本。需要熟练运用，否则可能会造成后期维护困难，建议加上注释。

3.OOCSS核心思想

OOCSS追求组件的复用，尽量不使用继承选择符，并且class命名比较抽象，一般不体现具体内容。核心思想有两点：

3.1 结构和皮肤分离

保留结构（如 height、width、position、margin、overflow 等），并在扩展类中保留视觉特征（如 background、border、color 等）。将视觉样式作为单独的“主题”来应用，不必覆盖视觉属性。

3.2 容器与内容分离

指不要在 CSS 中模仿 HTML 的结构。换句话说，不要在样式表中引用标签或 ID。并将嵌套类保持在最低限度。
相反，尝试创建和应用描述相关标签使用的类。内容指的是位于其他元素中的元素，我们不应该将一般规则限定于特定的容器

4.示例

需求：一个按钮

.btn-construction {  // 结构width: 100px;padding: 10px;border-radius: 10px;
}
.btn-face {  // 皮肤color: #fff;background: #55acee;
}

<button class="button-structure button-skip"></button>

在 Sass 中，我们可以使用 %placeholder 来创建对象，通过 @extend 在类中调用，将其合在一起。这样就可以自己组织代码：

%button-structure {min-width: 100px;padding: 1em;border-radius: 1em;
}
%button-skip {color: #fff;background: #55acee;
}
.btn {@extend %button-structure;@extend %button-skip;
}

以上就是OOCSS，已记录 SMASS、BEM、OOCSS 三种 CSS 规范，根据实际情况运用到项目中（俺习惯使用 OOCSS），使得越来越规范。

CSS规范之 OOCSS相关推荐

Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
[css] 说说你对BEM规范的理解，同时举例说明常见的CSS规范有哪些？
[css] 说说你对BEM规范的理解,同时举例说明常见的CSS规范有哪些? BEM是比较好的CSS规范,应该也是得到大家认可最多的CSS规范 OAMC是WeUI根据BEM改造来的 object-are ...
Web前端框架（JavaScript，CSS）、html组件、CSS规范与第三方库
1.什么是前端框架前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件( ...
CSS规范之 BEM
不论是为团队考虑,还是后续的维护,规范CSS命名真的很重要! 这里介绍CSS命名规范中的其中一个:BEM. 先贴上一个关于BEM规范的示例网站:https://9elements.com/bem-ch ...
好程序员web前端分享值得参考的css理论：OOCSS、SMACSS与BEM
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular C ...
HTML、CSS规范
作为一名前端开发者,至少要对HTML.CSS规范有个了解,然后尝试在项目是使用,以便别人阅读你代码的时候,也相对轻松点. HTML.CSS规范,参见:编码规范 by @mdo JavaScript 参 ...
[css] 说出至少十条你理解的css规范
[css] 说出至少十条你理解的css规范命名规范(连字符-分隔的字符串)文件宽度限制(每行80个字符)加注释编写选择器应有助于重用尽量不要加 !important避免使用CSS表达式选择<l ...
Scoped CSS规范草案
写在前面问:什么是Scoped CSS规范? Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. 面对组件化的普及,组件的复用很普遍的需求,然而CSS相互污染是 ...
如何写好CSS？（OOCSS DRY SMACSS）
同一个样式在同一个element上作用了好几遍,而同一个样式又分散在4,5个class上,优先级有很多层.可以看得出这个怪物不是一个人造就的,早期的开发者选择了SCSS技术,但混乱的import导致了 ...

CSS规范之 OOCSS

文章目录