OOCSS实用方法论

OOCSS(Object Oriented CSS)

概念

OOCSS是一套CSS开发的方法论。OO则是方法论的指导核心,即面向对象。

基础原则

独立的结构和样式,独立的容器和内容。
—— by Nicole Sullivan

为了更好的诠释这两个概念,举个例子:
单选按钮RadioButton,通过div来构建DIY样式的按钮,thumb是可点选的按钮,label是文本信息。

<!-- 以往做法 -->
<style>
.radiobutton {
  display: flex;
}
.radiobutton-thumb {
  width:1rem;
  height:1rem;
  background-color:gray;
}
.radiobutton-thumb-activated {
  background-color:black;
}
.radiobutton-label {
  font-size: 1rem;
  color: black;
}
</style>
<div class="radiobutton">
  <div class="radiobutton-thumb"></div>
  <div class="radiobutton-label"></div>
</div>

<!-- OOCSS 做法-->
<style>
.radiobutton-thumb {
  width: 1rem;
  height: 1rem;
}
.flex {
  display: flex;
}
.fs-xs {
  font-size: 1rem;
}
.bg-dark {
  background-color:black;
}
.bg-light {
  background-color:gray;
}
.c-dark {
  color: black;
}
</style>
<div class="radiobutton flex">
  <div class="radiobutton-thumb bg-dark"></div>
  <div class="fs-xs c-dark"></div>
</div>

基于原则,我们要做的是将需要描述的功能样式拆解出结构、款式(样式)、容器和内容。结构和款式比较好理解,而容器和内容的关系是一种模块的逻辑关系,通常是指嵌套和被嵌套的对象。
在以上代码里也可以发现,似乎用来描述对象特征的CSS的代码量增加了,并且在html中的class也变复杂了。尽管如此,这却是OOCSS的优点。事实上,在一个项目的整套代码中,样式被拆分成可重用的部分,这些部分相互组合成对象的特征来描述,总的代码量会更加精简。
(注意:将样式拆分的越细,class中描述的越多,设计不见得越好。需要考虑真正重用的部分有哪些。)

实际过程中,我总结两个描述性原则:
1. 如果类似组件的共同样式超过3个,就可以抽出一个公共样式类。
2. 同一项目中可按OO思想来抽象的模块、组件大于3个,就有必要进行OOCSS设计。
3. 不同项目中,也有复用CSS的需求的,也可以应用OOCSS。

OOCSS的实现过程

首先,OOCSS可以用简单的CSS来描述,但并不推荐。原因是在代码结构和效率上存在短板。建议实用LESS/SCSS等工具语言进行实现。
其次,在组件功能的设计中,要考虑OOCSS的实现。即HTML、JS、CSS都应该统一各个组件的设计逻辑。

具体的过程如下:
1. 建立组件库
这个过程非常关键。需要我们根据需求去确定什么组件是可以重用的,然后给这些组件创建一个对应的HTML标签,并为组件设置所需要的样式风格。例如:

.button {
   padding: 1rem;
   display: inline-box;
   line-height: 1;
   text-align: center;
   color: black;
}
  1. 独立的容器和内容,独立的结构和样式规则
    这一步,需要按上面提到的原则进行样式的拆分。

  2. 使用类名为扩展基本对象
    假使有 .button-default , .button-primary 这样两种,所以抽离之后会变成这样:

.button {   
   padding: 1rem;
   display: inline-box;
   line-height: 1;
   text-align: center;

   &.button-default { background: hsla(180, 1%, 28%, 1); color: black;}   
   &.button-primary { background: hsla(208, 56%, 53%, 1); color: gray;}   
}   

default 和 primary 被视为button基类的两个子类,共同的属性是button描述的部分。

  1. 坚持以语义类来命名类名
    如上面描述的default 和 primary,具有语义描述性。而通常我们看到的 large、small 这类不具备语义描述性,不利于复用。

优点

  1. 减少CSS代码
  2. 具有清洁的HTML标记,有语义的类名,逻辑性强的层次关系
  3. 语义标记,有助于SEO
  4. 更好的页面优化,更快的加载时间(因为有很多组件重用)
  5. 可扩展的标记和CSS样式,有更多的组件可以放到库中,而不影响其他的组件
  6. 能轻松构造新的页面布局,或制作新的页面风格

缺点

  1. OOCSS适合真正的大型网站开发,因为大型网站用到的可重用性组件特别的多,如果运用在小型项目中可能见不到什么成效。
  2. 如果没用巧妙的使用,创建组件可能对于你来说是一堆没用的东西,成为一烂摊子,给你的维护带来意想不到的杯具,说不定还是个维护的噩梦。最好给每一个组件备写一份说明文档,有助于调用与维护。

参考

OOCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注