本文介绍面向对象的CSS(object oriented CSS)以及如何使用种技术提高性能以及可维护性。
OOCSS的原则
与其它面向对象编程的方法一样，OOCSS的目标在于提高代码的复用性，最终，更快以及更高效的进行开发，更方便的添加样式及维护样式。
在OOCSS GitHub的维基上, OOCSS简述为二条重要原则。
将结构从样式(Skin)中分离
在大部分网页设计中，可视的元素往往会重复使用，如颜色、渐变、边框样式。同时也有一些不可视的元素（如“结构”）也同样在重复的使用着。当我们抽象这些元素的时候，这些元素往往可以能更多的重复使用，在下面的代码中我们将做一些 解释。
以下是一套典型未应用任何OOCSS原则的样式代码：
#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;
}
现在所有元素使用class定义，同时可复用的部分我们定义为”skin”，这样代码中就没有重复的部分。我们只需要给所有元素都加上skin的class即可。这便是简单的抽象的例子，但还未能做到“更少代码，更多的可能复用”的层次。
内容与容器的分离
以下为原始代码：
#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;
}
代码指定所有的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;
}
我们在不经意间造成了大量的代码重复。如果基于OOCSS思想，我们需要有更多的超前思维去抽象公用的元素，并将这些元素分离到不同的模块或对象中，然后不停的重用。
上面的代码被指派到了特定的对象中，如sidebar或footer。这使得重用极为困难。我们应该保证我们的样式不应当基于任何明确的元素存在，这样我们才可以在文档中随处使用。
真实案例
先看看原始代码：
.header-inside {
width: 980px;
height: 260px;
padding: 20px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
只有少数样式只针对header，在部分可以重用给其它元素，因此我们抽象后的样式结构如下：
.globalwidth {
width: 980px;
margin: 0 auto;
position: relative;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
}
<p>.header-inside {
padding-top: 20px;
padding-bottom: 20px;
height: 260px;
}
globalwidth这个类的样式将被用于其它可复用的区域，如下代码所示：
<header> <div class="header-inside globalwidth"> </div> </header> <div class="main globalwidth"> </div> <header> <div class="footer-inside globalwidth"> </div> </footer>
有些人可能认为这样使得html的标记变得混乱，违备了把标记(markup)从表现(presentation)中分离的原则。但不可否认的是这样能更快的去使用和修改公用的样式。
The Media Object
一位有关OOCSS的先行者Nicole Sullivan。她创建了一个称为media object 的开源代码, 如她的博文中所说, 这套代码可以帮你节省上百行的代码.
Media object是一个很好的OOCSS的例子，他使得任何需要做图片在做，内容在右的这种类型的容器排版的问题。
OOCSS的好处
更快的载入
更多可复用的代码意味着更少的文件尺寸，使得加快网页的载入速度。
的确会造成HTML中的标记增加。但相对来说是一种值得使用的代价。
可维护的样式
以模块的形式去维护内容，而不是不停的增加样式
如果想得够全面的话，在构建新页面的时候更快捷
值得注意的地方
可以继续使用ID
OOCSS的原则只是尽量不要使用ID来做为选择符，其它情况下应该继续使用
小型项目也许不需要使用OOCSS
小项目使用OOCSS也许没有太大必要，必尽速度为王
具体实现上的原则
- 不要使用递进式选择符(如 .sidebar h3)
- 不要使用ID作为样式选择符
- 不要将样式置在对象元素上(如 div.header)
- 除非有必要，不要使用!important
- 使用 CSS Lint 检查你的样式 (and know that it has options and method to its madness)
- 使用 CSS grids
跟进作者Nicole Sullivan
作者网站Nicole Sullivan.
基它一些作者之前有关OOCSS的演讲内容和资料
- Object Oriented CSS (Slideshow)
- High Performance Websites: Nicole Sullivan (Video)
- Our Best Practices Are Killing Us (Slideshow)
- CSS Bloat (Slideshow)
原文出处：an introduction to object oriented css – OOCSS
简要翻译：Experience10.com
This entry was written by , posted on December 21, 2011 at 10:00 am, filed under Front End. Bookmark the permalink. Follow any comments here with the RSS feed for this post.