框架？工具？哲学？
Object-oriented CSS is a coding paradigm that styles "objects" or "modules"—nestable
chunks of HTML that define a section of a webpage—with robust, reusable styles.
令 CSS 更强大
ul{...}
ul li{...}
ul li a(②但是，结构在这里){①直至现在，我们只关心这里}意大利面条
稍微好一点
我们筑了大栅栏
公认的毒药中心
文件大小和 HTTP 请求未作优化
性能的最佳实践、可扩展性、和最重要的-容易使用
可重用的“乐高积木”
性能“免费”
组合并匹配来创建不同的和有趣的页面
新的页面一般不需要额外的 CSS
根据你需要的语义来完成你想要的表现
必须对页面中的所有模块可用
在不能增加价值的元件上浪费性能资源
h3 和 h5 太相似了
如果一个页面中的两个模块看起来太相似，它们在一个站点中太相似，选择一个！
Yahoo! 个人财经
2+不同的 tab 风格。能用相同的图像吗？
3个元件的轮廓太相似了。选择一个。
模块宽度、背景色或背景图片的改变是个很好的模块复用的例子。
沙盒比意大利面条好，不过引起了性能问题
不好的：
#weatherModule h3{color:red;}
#tabs h3{color:blue;}推荐：
h3{color:black;}
#weatherModule h3{color:red;}
#tabs h3{color:blue;}写更多规则去重写之前的疯狂规则。
比如标题在任意模块的表现是可预见的。
h1, .h1{...}
h2, .h2{...}
h3, .h3{...}
h4, .h4{...}
h5, .h5{...}
h6, .h6{...}真的吗？没有重复？没有相似的？
.category{...}
.section{...}
.product{...}
.prediction{...}复用代码段
是抽象不同水准的语义失败所导致的
定义每个对象的界限
图像或 flash
容器和内容对象达到高性能设计
内部透明！
需要小心选择像素
考虑 PNG8 来渐进增强
可变的或渐变背景
提防圆角后的可变或渐变背景
两个单独的 class
示例：模块
Sloves borwser bugs, positions presentational elems, and generally does the heavy
lifting of CSS
弄漂亮些。
目标是非常明确的皮肤，复杂的被结构对象和跨网站共享所吸收(The goal is very predictable skins, complexity is
absorbed by the structure object and shared across the site)。
/* ----- simple (extends mod) ----- */
.simple .inner{
border:1px solid gray;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
.simple b{
*background-image:url(skin/mod/corners.png);
}皮肤的每个值应该是确定的，容易预测并测量。
可延长的高度和宽度
Limit the ways in which a module can be resued
坚信其会很美
给设计师和工程师
从简单到复杂的任务
Gonzalo Cordero Yahoo! 前端开发工程师
这不仅仅是 OOCSS！
本文内容来源于：
