面向对象的CSS应用

ul{...}
ul li{...}
ul li a(②但是，结构在这里){①直至现在，我们只关心这里}

#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{...}

• 定义全局值
• 遵循语义(同时允许灵活的视觉)

需要超过6个标题？

真的吗？没有重复？没有相似的？

仍然需要更多标题？

.category{...}
.section{...}
.product{...}
.prediction{...}

• 通过对象本身的 class 扩展标题对象
• 避免使用继承来改变嵌套对象的表现

抽象

复用代码段

重复编码

是抽象不同水准的语义失败所导致的

分离：

• 容器和内容
• 结构和皮肤
• 轮廓和背景
• 对象和混合物

分离容器和内容

定义每个对象的界限

开放的编辑区

图像或 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! 前端开发工程师

需要考虑的设计因素

• 跨浏览器兼容
• 多语言支持
• 可访问性
• 按时完成全部布局和功能

困惑

WEB 妥协

• 为什么“简单的东东”变复杂？
• 为什么要妥协？
• 为什么我们不能依固定的规则和结构？像讲台上那样？

OOCSS SAVES THE DAY

• 单个简单的标签结构
• 跨浏览器支持(甚至 IE 5.5！)
• 非常少的 CSS
• 可剥离的，容易应用在多个设计上

译注

这不仅仅是 OOCSS！

本文内容来源于：

• Object Oriented CSS 高清视频下载
• What is Object Oriented CSS?
• The Fast And The Fabulous
• The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009
• After YSlow “A”
• Design Fast Websites