什么是面向对象的 CSS
框架？工具？哲学？
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(②但是，结构在这里){①直至现在，我们只关心这里}CSS 大约 2005
意大利面条
CSS 大约 2008
稍微好一点
而不是使我们的代码变好
我们筑了大栅栏
性能呢？
公认的毒药中心
网站变慢
文件大小和 HTTP 请求未作优化
CSS 大约 2009
面向对象的CSS
性能的最佳实践、可扩展性、和最重要的-容易使用
- 创建对象而不是页面或模块
- 在内容对象上设置好的公用默认值
- 抽象重用元素
- 分离结构和皮肤(为两个 class)
- 分离容器和内容(开放的编辑区)
- 使用继承
- 对看起来 OO 的应用多个 class
9条最佳实践
- 组件库：可重用和冗余
- 一致性：避免位置依赖(location-dependent)的样式
- 抽象化
- 优化图像和 sprites
- 灵活
- 学会爱栅格
- 避免非标准的浏览器字体
- 避免高度对齐(alignment)
- 谨慎卖弄你的技术(choose your bling carefully)
9个陷阱
- 位置依赖的样式
- 避免指定一个 class 的标签
- 避免用 ID 定义主内容区域内的样式
- 避免不规则背景上阴影和圆角
- 不要拼合所有图片(触发只有少数几个页面)
- 避免高度对齐
- 文字就是文字，不要做成图片
- 冗余
- 避免过早优化
创建组件库
可重用的“乐高积木”
重用元素使得它们
性能“免费”
组件就像乐高积木
组合并匹配来创建不同的和有趣的页面
从组件库创建 HTML
新的页面一般不需要额外的 CSS
标题
根据你需要的语义来完成你想要的表现
列表
必须对页面中的所有模块可用
SIDE-WIDE LOGES
- 标题
- 列表(比如 action list, external link list, product list, 或 feature list)
- 模块 headers 和 footers
- 栅格
- 按钮
- 圆角 boxes
- Tabs, Carousel, toggle blocks
避免重复
在不能增加价值的元件上浪费性能资源
近似相同的模块
h3 和 h5 太相似了
经验法则：
如果一个页面中的两个模块看起来太相似，它们在一个站点中太相似，选择一个！
例子
Yahoo! 个人财经
2+不同的 tab 风格。能用相同的图像吗？
3个元件的轮廓太相似了。选择一个。
模块宽度、背景色或背景图片的改变是个很好的模块复用的例子。
避免位置依赖(location-dependent)的样式
沙盒比意大利面条好，不过引起了性能问题
避免什么？
运行区域
不时…
返回直径
破坏
在 CSS 中我们一直这么做
破坏
不好的：
#weatherModule h3{color:red;}
#tabs h3{color:blue;}