什么是面向对象的 CSS
框架？工具？哲学？
很像语言的进化Object-oriented CSS is a coding paradigm that styles "objects" or "modules"nestable
chunks of HTML that define a section of a webpagewith robust, reusable styles.
令 CSS 更强大
有什么不同？ul{...}ul li{...}ul li a(②但是，结构在这里){①直至现在，我们只关心这里}意大利面条
CSS 大约 2008稍微好一点
而不是使我们的代码变好我们筑了大栅栏
性能呢？公认的毒药中心
网站变慢文件大小和 HTTP 请求未作优化
CSS 大约 2009面向对象的CSS性能的最佳实践、可扩展性、和最重要的-容易使用
创建对象而不是页面或模块 在内容对象上设置好的公用默认值 抽象重用元素 分离结构和皮肤(为两个 class) 分离容器和内容(开放的编辑区) 使用继承 对看起来 OO 的应用多个 class 9条最佳实践组件库：可重用和冗余 一致性：避免位置依赖(location-dependent)的样式 抽象化 优化图像和 sprites 灵活 学会爱栅格 避免非标准的浏览器字体 避免高度对齐(alignment) 谨慎卖弄你的技术(choose your bling carefully) 9个陷阱位置依赖的样式 避免指定一个 class 的标签 避免用 ID 定义主内容区域内的样式 避免不规则背景上阴影和圆角 不要拼合所有图片(触发只有少数几个页面) 避免高度对齐 文字就是文字，不要做成图片 冗余 避免过早优化 创建组件库可重用的乐高积木
重用元素使得它们性能免费
组件就像乐高积木组合并匹配来创建不同的和有趣的页面
从组件库创建 HTML新的页面一般不需要额外的 CSS
标题根据你需要的语义来完成你想要的表现
必须对页面中的所有模块可用
在不能增加价值的元件上浪费性能资源
近似相同的模块h3 和 h5 太相似了
如果一个页面中的两个模块看起来太相似，它们在一个站点中太相似，选择一个！
例子Yahoo! 个人财经
2+不同的 tab 风格。能用相同的图像吗？
3个元件的轮廓太相似了。选择一个。
模块宽度、背景色或背景图片的改变是个很好的模块复用的例子。
（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）避免位置依赖(location-dependent)的样式沙盒比意大利面条好，不过引起了性能问题
避免什么？运行区域不时返回直径破坏在 CSS 中我们一直这么做破坏
不好的：
#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
容器和内容对象达到高性能设计
分离轮廓和背景内部透明！
MAKING IT LOOK FAB需要小心选择像素
考虑 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
坚信其会很美
传授 OO CSS给设计师和工程师
自然改进从简单到复杂的任务
Gonzalo Cordero Yahoo! 前端开发工程师
这不仅仅是 OOCSS！
本文内容
