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

模块宽度、背景色或背景图片的改变是个很好的模块复用的例子。

避免位置依赖(location-dependent)的样式

沙盒比意大利面条好，不过引起了性能问题

避免什么？

运行区域

不时…

返回直径

破坏

在 CSS 中我们一直这么做

破坏

不好的：

#weatherModule h3{color:red;}
#tabs h3{color:blue;}

• h3 的全局颜色未定义，将导致
  • 在新模块中没有定义样式
  • 开发者被迫为相同的样式写更多 CSS

推荐：

h3{color:black;}
#weatherModule h3{color:red;}
#tabs h3{color:blue;}

• 定义了全局颜色(更好！)
• Weather 和 tabs 覆盖了缺省的 h3
  • h3 的3种样式在同一模块中不能并存
  • 缺省样式不能用在 weather 和 tabs 除非有更高的优先级
• Weather 和 tabs 的 h3 永远不能在其他模块中使用

一致性

写更多规则去重写之前的疯狂规则。

比如标题在任意模块的表现是可预见的。

用这个来代替

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;
  

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