原文转自:http://blog.jobbole.com/55067/

编写好的CSS代码,有助提升页面的渲染速度。本质上,引擎需要解析的CSS规则越少,性能越好。MDN上将CSS选择符归类成四个主要类别,如下所示,性能依次降低。

  1. ID 规则
  2. Class 规则
  3. 标签规则
  4. 通用规则

对效率的普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始,虽然该书中罗列的更加详细,但你也可以在这里查看完整的引用列表,也可以在谷歌的《高效CSS选择器的最佳实践》中查看更多的细节。

本文我想分享一些我在编写高性能CSS中用到的简单例子和指南。这些都是受到MDN 编写的高效CSS指南的启发,并遵循类似的格式。

避免过度约束

一条普遍规则,不要添加不必要的约束。

1
2
3
4
5
6
7
// 糟糕
ul#someid {..}
.menu#otherid{..}
 
// 好的
#someid {..}
#otherid {..}

后代选择符最烂

不仅性能低下而且代码很脆弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改,这是多么糟糕,特别是在大公司里,写html和css的往往不是同一个人。

1
2
// 烂透了
html div tr td {..}

避免链式(交集)选择符

这和过度约束的情况类似,更明智的做法是简单的创建一个新的CSS类选择符。

1
2
3
4
5
// 糟糕
.menu.left.icon {..}
 
// 好的
.menu-left-icon {..}

坚持KISS原则

想象我们有如下的DOM:

1
2
3
4
5
<ul id="navigator">
    <li><a href="#" class="twitter">Twitter</a></li>
    <li><a href="#" class="facebook">Facebook</a></li>
    <li><a href="#" class="dribble">Dribbble</a></li>
</ul>

下面是对应的规则……

1
2
3
4
5
// 糟糕
#navigator li a {..}
 
// 好的
#navigator {..}

使用复合(紧凑)语法

尽可能使用复合语法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 糟糕
.someclass {
 padding-top: 20px;
 padding-bottom: 20px;
 padding-left: 10px;
 padding-right: 10px;
 background: #000;
 background-image: url(../imgs/carrot.png);
 background-position: bottom;
 background-repeat: repeat-x;
}
 
// 好的
.someclass {
 padding: 20px 10px 20px 10px;
 background: #000 url(../imgs/carrot.png) repeat-x bottom;
}

避免不必要的命名空间

1
2
3
4
5
// 糟糕
.someclass table tr.otherclass td.somerule {..}
 
//好的
.someclass .otherclass td.somerule {..}

避免不必要的重复

尽可能组合重复的规则。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 糟糕
 
.someclass {
 color: red;
 background: blue;
 font-size: 15px;
}
 
.otherclass {
 color: red;
 background: blue;
 font-size: 15px;
}
 
// 好的
 
.someclass, .otherclass {
 color: red;
 background: blue;
 font-size: 15px;
}

尽可能精简规则

在上面规则的基础上,你可以进一步合并不同类里的重复的规则。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 糟糕
.someclass {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
 font-size: 16px;
}
 
.otherclass {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
 font-size: 8px;
}
 
// 好的
.someclass, .otherclass {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
}
 
.someclass {
 font-size: 16px;
}
 
.otherclass {
 font-size: 8px;
}

避免不明确的命名约定

最好使用表示语义的名字。一个好的CSS类名应描述它是什么而不是它像什么。

避免 !importants

其实你应该也可以使用其他优质的选择器。

遵循一个标准的声明顺序

虽然有一些排列CSS属性顺序常见的方式,下面是我遵循的一种流行方式。

1
2
3
4
5
6
7
.someclass {
 /* Positioning */
 /* Display & Box Model */
 /* Background and typography styles */
 /* Transitions */
 /* Other */
}

组织好的代码格式

代码的易读性和易维护性成正比。下面是我遵循的格式化方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 糟糕
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
 ...
}
 
// 好的
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
 ...
}
 
// 好的做法
.someclass {
    background-image:
        linear-gradient(#000, #ccc),
        linear-gradient(#ccc, #ddd);
    box-shadow:
        2px 2px 2px #000,
        1px 4px 1px 1px #ddd inset;
}

显然,这里只讲述了少数的规则,是我在我自己的CSS中,本着更高效和更易维护性而尝试遵循的规则。如果你想阅读更多的知识,我建议阅读MDN上的编写高效的CSS和谷歌的优化浏览器渲染指南。

【转】编写更好的CSS代码的更多相关文章

  1. 使用 Promises 编写更优雅的 JavaScript 代码

    你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它 ...

  2. 编写更好的CSS

    编写好的CSS代码能提升页面的渲染速度.本质上,一条规则都没有引擎解析的最快.MDN上将CSS选择符归拆分成四个主要类别,如下所示,性能依次降低. ID 规则 Class 规则 标签规则 通用规则 对 ...

  3. 编写更好的C#代码

    引言 开发人员总是喜欢就编码规范进行争论,但更重要的是如何能够在项目中自始至终地遵循编码规范,以保证项目代码的一致性.并且团队中的所有人都需要明确编码规范所起到的作用.在这篇文章中,我会介绍一些在我多 ...

  4. 20 个让你效率更高的 CSS 代码技巧

    在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...

  5. 编写更好的jQuery代码

    这是一篇关于jQuery的文章,写到这里给初学者一些建议. 现在已经有很多文章讨论jQuery和JavaScript的性能问题,然而,在这篇文章中我计划总结一些提升速度的技巧和一些我自己的建议来改善你 ...

  6. 编写更好的jQuery代码的建议

    讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染 ...

  7. 编写更好的jQuery代码的建议(share)

    留个备份! 原文链接: Mathew Carella   翻译: 伯乐在线- yanhaijing译文链接: http://blog.jobbole.com/52770/ 讨论jQuery和javas ...

  8. 用Flow编写更好的js代码

    关于本文: 原文地址 翻译地址 译者:野草 本文发表于前端早读课[第897期] 你是否经常在debug那些简单可避免的bug?可能你给函数传参的时候搞错了参数的顺序,或者本来应该传个Number类型的 ...

  9. 编写更好的jQuery代码(转)

    这是一篇关于jQuery的文章,写到这里给初学者一些建议. 原文地址:http://flippinawesome.org/2013/11/25/writing-better-jquery-code/ ...

随机推荐

  1. comboBox的多选框之疑难杂症——逗号篇

    提笔写正文之前,首先要再次提醒一下自己,因为总是记不住,以至大神同事们都开始用“嫌弃”的眼光看自己了——遇到问题,自己去解决,没有什么问题是解决不掉的,不要在没认真努力思考之前就去麻烦大神同事,切记切 ...

  2. JVM优化之调整大内存分页(LargePage)

    转自:http://cjjwzs.iteye.com/blog/1059381 本文将从内存分页的原理,如何调整分页大小两节内容,向你阐述LargePage对JVM的性能有何提升作用,并在文末点明了大 ...

  3. [Js]缓冲运动

    一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...

  4. bzoj 2428: [HAOI2006]均分数据

    #include<cstdio> #include<iostream> #include<cstdlib> #include<ctime> #inclu ...

  5. HDU 3567 Eight II 打表,康托展开,bfs,g++提交可过c++不可过 难度:3

    http://acm.hdu.edu.cn/showproblem.php?pid=3567 相比Eight,似乎只是把目标状态由确定的改成不确定的,但是康托展开+曼哈顿为h值的A*和IDA*都不过, ...

  6. HDU 3642 扫描线(立方体体积并)

    Get The Treasury Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  7. linux修改系统时间和linux查看时区、修改时区的方法

    一.查看和修改Linux的时区 1. 查看当前时区命令 : "date -R" 2. 修改设置Linux服务器时区方法 A命令 : "tzselect" 方法 ...

  8. Ubuntu14.04安装和配置ROS Indigo(一)

    安装ROS 配置Ubuntu的软件源 配置Ubuntu要求允许接受restricted.universe和multiverse的软件源,可以根据下面的链接配置: https://help.ubuntu ...

  9. 初步比较zeromq vs. wcf

    用最简单的Calculator比较zeromq的req-rep模式 vs. wcf的http和net.tcp模式,看哪一种的传输性能更高. 1.比较结果如下 方式 耗费时间 wcf_http_sing ...

  10. 'NSInteger' (aka 'long') to 'int32

    怎么去掉Xcode工程中的某种类型的警告 Implicit conversion loses integer precision: 'NSInteger' (aka 'long') to 'int32 ...