电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文
[图文]CSS教程:驯服CSS选择器
CSS教程:驯服CSS选择器
2009-10-28 11:53:37  文/Nicole S…   出处:电脑软硬件应用网   

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

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    CSS伪类选择器nth-child()
    css3教程:background属性调整增强
    css教程:CSS3 Media Queries 详解
    CSS 类名的长命名和短命名
    CSS实例教程:非浮动区域设置宽度
    如何使用css约束一个层不可见?
    CSS的list-style解释
    小议使用“完整”的CSS的缺点
    CSS中的相对定位与绝对定位详解
    实例使用DIV+CSS制作圆角边框加阴影…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号