|
CSS 文件的大小和所引起的 HTTP 的请求数
是 CSS 性能的最关键因素
回流(reflow)和渲染时间
(非常！)没那么重要
副本(duplication)比陈旧的规则(stale rules)更糟糕
因为我们有工具处理后者
定义缺省值
不要在每处都重复编码
不好的：
#weatherModule h3{color:red;}
#tabs h3{color:blue;}
推荐：
h1, .h1{...}
h2, .h2{...}
h3, .h3{...}
h4, .h4{...}
h5, .h5{...}
h6, .h6{...}
用单独的 class 来定义结构
不要在每处都重复编码
使用 class
而不是元素选择器
不好的：
div.error{...}
推荐：
.error{绝大多数代码写在这里}
div.error{单独定义}
p.error{单独定义}
em.error{单独定义}
避免使用元素选择器
初始化除外
不好的：
div{...}
ul{...}
p{...}
推荐：
.error{...}
.section{...}
.products{...}
给规则同样的权重
使用级联去重写先前的规则
不好的：
.myModule .inner b{...}
.myModule2 b{...}
推荐：
.myModule b{...}
.myModule2 b{...}
保守的使用 hack
不好的：
.mod .hd{...}
.ie .mod .hd{...}
.weatherMod .hd{...}
推荐：
.mod .hd{color:red;_zoom:1;}
.weatherMod .hd{...}
注：此点来自 The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009 第96P，为作者在 Ajax Experience 2009 上所做的补充。
避免指定位置
应用 class 在你想要改变的对象上
不好的：
.sidebar ul{...}
.header ul{...}
推荐：
.mainNav{...}
.subNav{...}
避免太过特别的 class
它们是都有语义的，而且有限制
不好的：
.ducatiMonster620{...}
.nicolesDucatiMonster620{...}
推荐：
.vehicle{...}
.motorcycle{...}
避免单独的定义
id 在每个页面只能使用一次
不好的：
#myUniqueIdentifier{...}
#myUniqueIdentifier2{...}
混合使用
避免重复编码
封装
不要直接访问对象的子节点
不好的：
.inner{...}
.tr{...}
.bl{...}
推荐：
.weatherMod .inner{...}
.weatherMod .tr{...}
.weatherMod .bl{...}
|