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

文章目录