网页制作教程:面向对象的CSS应用

什么是面向对象的 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

性能的最佳实践、可扩展性、和最重要的-容易使用

1. 创建对象而不是页面或模块
2. 在内容对象上设置好的公用默认值
3. 抽象重用元素
4. 分离结构和皮肤(为两个 class)
5. 分离容器和内容(开放的编辑区)
6. 使用继承
7. 对看起来 OO 的应用多个 class

9条最佳实践

1. 组件库：可重用和冗余
2. 一致性：避免位置依赖(location-dependent)的样式
3. 抽象化
4. 优化图像和 sprites
5. 灵活
6. 学会爱栅格
7. 避免非标准的浏览器字体
8. 避免高度对齐(alignment)
9. 谨慎卖弄你的技术(choose your bling carefully)

9个陷阱

1. 位置依赖的样式
2. 避免指定一个 class 的标签
3. 避免用 ID 定义主内容区域内的样式
4. 避免不规则背景上阴影和圆角
5. 不要拼合所有图片(触发只有少数几个页面)
6. 避免高度对齐
7. 文字就是文字，不要做成图片
8. 冗余
9. 避免过早优化

创建组件库

可重用的“乐高积木”

重用元素使得它们

性能“免费”

组件就像乐高积木

组合并匹配来创建不同的和有趣的页面

从组件库创建 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个元件的轮廓太相

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!