面向对象的 CSS (OOCSS)

最新推荐文章于 2021-02-01 13:15:48 发布

holmes89757

最新推荐文章于 2021-02-01 13:15:48 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： Web前端 CSS

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

特别声明：此篇文章由D姐根据Louis Lazaris的英文文章原名《An Introduction To Object Oriented CSS (OOCSS)》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss以及作者相关信息

作者：Louis Lazaris

译者：D姐

你曾经听过这样一句话：“内容就是王道”吗？作为一位Web开发者，因为工作的缘故经常与内容打交道，这可能是很正常不过了。对于我们已经是过渡使用，但是什么才能把游客吸引到一个网站才是真正的一道。

从一个Web开发者的观点来看，一些人认为速度才是王道。久而久之，我也开始认同这个观点。近年来许多有经验的前端工程题提供建议"如何才能通过一些最佳实践的方法提高用户体验度呢？"

不幸的是，众多开发者忽视了CSS的表现（认为他太过简单，是一种机械的工作），而把更多关注在Javascript的性能上或者其他方面。

在这篇文章中，我将通过面向对象的css概念的介绍，让你了解一些经常被忽视的地方是如何在改善用户体验和网页可维护性上面发挥作用的。

OOCSS面向对象的css原则

任何基于面向对象的代码方法，其主要目的都是鼓励代码的复用。OOCSS也是一样，讲究复用，并最终可以更快更高效的书写你的样式，同时方便日后的添加和维护。

根据oocss在github上的描述，oocss是基于两个主要原则

1、结构与样式的分离

几乎页面上的每个元素都有不同的视觉特效（也叫皮肤），他们在不同的环境中重复的在使用。思考一下，一个网站的品牌logo，它的颜色，细微的渐变或是可见的边框。另一方不是视觉特效（结构）也在不断的重复使用。

当把这些不同的特性抽象到一个基于类的模块里，他们变得可复用，可以运用到任何的元素上，并且具有相同的效果。让我们来看一个代码的前后对比，你就明白我在说些什么了。

在运用oocss的原则前，你的css可能是这个样子的：

#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

上面的三个元素都有各自的样式，而且都是用不可复用的id选择器定义的样式。但是他们也有一些公用的样式。这些公用的样式由网站品牌风格或设计风格所决定的。

由于一些长远考虑，我们抽象出一些公用的样式所以结果成这样：

.button {
  width: 200px;
  height: 50px;
}

.box {
  width: 400px;
  overflow: hidden;
}

.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

现在给所有元素运用类名，公用的样式部分整合到一个类名“skin”上，用来复用到元素上。我们只需要把“skin”类名添加给所有的元素,除了更少的使用了利用代码之外，其效果和前面的例子前生的效果一模一样。

2、容器与内容的分离

关于oocss在github上的描述，第二个原则是容器与内容的分离。为了说明这个的重要性，采用以下css:

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

这些样式将运用到ID为“#sidebar”的子元素“h3”上，但是如果想把字体大小和文本阴影之外的样式运用到脚部具有相同效果的“h3”上，又应该怎么办？

然后我们也许需要这样做：

#sidebar h3, #footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
  font-size: 1.5em;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

或许我们可能会写的更糟糕：

#sidebar h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

/* other styles here.... */

#footer h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  line-height: 1;
  color: #777;
  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

这样写代码的，或许初学人员会经常犯的，就算是你从事过前端工作一段时间，有一定的经验了，或许还是会犯这样的错误。犯错误是好事，但是犯了这样的错误你是否有思考过，为什么会写成这样？如果你从没有思考过，只是照旧这样写，那就是糟糕的一件事了。因为你只是在机械的工作，为了完成boss给你的任务而且。长期下来是件恐怖的事情。

大漠

今天我们没有复用样式可能觉得不必要，也许没有意识到（或是简单的根本不关心）。随着OOCSS的推行，我们鼓励大家长远考虑一下不同元素的公用样式是什么？然后把他们分离成模块或是对象，以便可以重复用到任何需要的地方。

在上面的例子中，用后代选择器声明的样式是不能复用的，因为他们依赖于一个特定的容器（在这里例子里要么是侧栏要么是页脚）。

当我们用基于oocss建立的类模块，我们确保我们的样式不依赖于任何包含元素。这意味着他们可以在文档的任何地方被复用，无论结构如何。

3、现实生活中的一个例子

为了进一步说明oocss是如何运用的，在我的网站最新设计我将做一些类似的工作。在我编写完我的网站页头的inner元素后，我意识到这个头部内部的一些基础结构也许可以复用到页面的其他元素上。

如下是我沿用以前的写法开始写的页头样式

.header-inside {
  width: 980px;
  height: 260px;
  padding: 20px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

列在这里的一些样式是类名为“header-inner”元素的独特样式。但是其余可以复用的样式我都把他们组成一个模块。这样我就可以抽出结构，样式添加到我们自己的复用类里，如：

.globalwidth {
  width: 980px;
  margin: 0 auto;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
  overflow: hidden;
}

.header-inside {
  padding-top: 20px;
  padding-bottom: 20px;
  height: 260px;
}

属于globalwidth类中的样式罗列如下

固定宽度
用margin：auto居中
为子元素创建一个定位的参照物
左右内留白padding为20px
为清除浮动设置overflow：hidden

现在我们可以自由的把这些样式运用到需要相同特征的任何元素，只需给需要的元素添加类名的简单方式，而无需写一行额外的css代码。

对于我的网站，我在主要的内容元素和页脚内部元素复用了这些结构样式。根据设计，这些样式也许可以运用到水平导航元素，可能会出现在标题和内容，或是任何有固定宽需要在页面居中的其他元素。

给这些元素添加“globalwidth”样式后，结构可能是这样的：

<header>
  <div class="header-inside globalwidth">
  </div>
</header>

<div class="main globalwidth">
</div>

<footer>
  <div class="footer-inside globalwidth">
  </div>
</footer>