一些比较高效的CSS写法建议
当浏览器解析html的时候,它构造了一个文档树来展现所有被显示的元素。 它在特定的样式表中去匹配元素,根据标准的css的层叠,继承和顺序规则, 在mozilla的实现中(可能其他的也是这样),对于每一个元素,css引擎通过规则去寻找匹配,css引擎评估每一个规则是从右到左的,从最右的selector开始, 也称之为key selector,直到找到匹配为止。
根据这个规则,越少的规则使用,css引擎将评估的越好。因此,移除没有用的css是改善页面性能的重要一步。之后,对于页面包含很多的元素的css规则, 优化这些规则也有利于提高页面的性能。优化页面性能最重要的一点在于使用明确的,避免不需要冗余的,使引擎系统快速的匹配到元素而不需要花费太多的时间。
下面的这些规则被认为是低效的
- 使用了后代选择器
使用全局选择器作为key
1 |
body * {...} |
2 |
.hide-scrollbars * {...} |
使用了标签选择器作为key
1 |
ul li a {...} |
2 |
#footer h 3 {...} |
- 使用子选择器和相邻选择器
使用全局选择器作为key
1 |
body > * {...} |
2 |
.hide-scrollbars > * {...} |
使用标签选择器作为key
1 |
ul > li > a {...} |
2 |
#footer > h 3 {...} |
子选择器和相邻选择器是低效的是因为对于每一个元素的匹配,浏览器不得不评估其他的一些元素,它需要双倍的时间耗费在匹配上。同时,越少的精确的key,越多的时间花费在匹配元素上面。尽管如此,即使是不高效的,他们比后代选择器的使用的效果要好一点。
- 过渡的限定选择器
id选择器是唯一的,包含了tag或者class的限定仅仅是增加了一些无用的信息(浏览器去评估)
1 |
ul#top_blue_nav {...} |
2 |
form#UserLogin {...} |
- 使用:hover在一些没有:hover的元素上面
在非标准模式下面。ie7,ie8将忽略这些规则。在标准模式下面,可能会导致一些性能的退化
1 |
h 3: hover {...} |
2 |
.foo:hover {...} |
推荐的方式
- 避免使用全局样式
允许一个元素去继承它的祖先,或者使用一个class去应用复杂的元素。
- 将规则写的越精确越好
偏向使用class ,id,少使用tag
- 移除一些无用的限定
下面的这些限定是多余的:1.id选择器被class 或者tag选择器限定;2.class被tag选择器进行限定(如果一个class只被用于一个tag,这也是很好的实践)。
- 避免使用后代选择器,特别是包含了一些无用的祖先元素
eg:body ul li a{...} 制定了一个无用的body限定,因为所有的元素都是在body中。
- 使用class选择器取代后代选择器
eg:如果你需要两个不同的样式(一个无序列表,一个有序列表),不要使用下面的样式
1 |
ul li { color : blue } |
2 |
ol li { color : red } |
应该这样的使用
1 |
.unordered- list-item { color : blue ;} |
2 |
.ordered- list-item { color : red ;} |
如果你一定要用后代选择器,建议你使用子选择器
- 避免使用:hover在一些没有连接的元素上面(对于ie序列的)
如果你使用:hover在一些无连接的元素上面,ie7,8会认为他们是无用的。建议使用事件onmouseover 来模拟。
一些比较高效的CSS写法建议的更多相关文章
- 弄清楚CSS的匹配原理让你写出高效的CSS
用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS: DIV#divBox p span.red{color:red;} 按习惯我们对这个CSS 的理解是 ...
- 书写高效的CSS
一.使用高效是CSS ①:使用外联样式替代行间样式或内嵌样式. 不推荐使用内联样式:<style></style> 不推荐使用内嵌样式:<p style="&q ...
- [css] 【转载】 精简高效的CSS命名准则/方法
原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...
- 书写更加高效的CSS,走出误区
根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS. 1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数 ...
- css写作建议和性能优化小结
1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,cs ...
- CSS书写建议参考
总结一些CSS书写建议提供大给家参考,这些是参考了一些文章以及我的个人经验总结出来. 1.能缩写的就尽量缩写吧,毕竟谁都不想多些一些也可以提高阅读体验.包括类名.颜色和css属性.
- 如何书写高效的css样式
如何书写高效的css样式? 有以下四个关键要素: 1.高效的css 2.可维护的css 3.组件化的css 4.hack-free css 书写高效的css: 1.使用外联样式替代行间样式或内嵌样式 ...
- 编写高效的 CSS 选择器
高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...
- 编写高效的CSS选择器
高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能 ...
随机推荐
- Python练习笔记(2)
文件读写,多线程.多进程 import time,os,threading,random def file_read(path): try: with open(path, 'r') as f: # ...
- mysql 常用函数,基本使用
1:选中排除表1 连接表2 表3 获取选中表1中部分选中表3 的部分 并且设置选中状态select t1.*,if(t2中t3id=t1.id,1,0)as checked from t1 lefet ...
- Hadoop(4)-Hadoop集群环境搭建
准备工作 开启全部三台虚拟机,确保hadoop100的机器已经配置完成 分发脚本 操作hadoop100 新建一个xsync的脚本文件,将下面的脚本复制进去 vim xsync #这个脚本使用的是rs ...
- LocalDate相关方法
getYear() int 获取当前日期的年份 getMonth() Month 获取当前日期的月份对象 getMonthValue() int 获取当前日期是第几月 getDayOfWeek() D ...
- node 分层开发
app.js var express = require('express');var app = express();app.use('/',require('./control'));app.us ...
- POJ2739 Sum of Consecutive Prime Numbers 确定某个数以内的所有素数
参考:https://www.cnblogs.com/baozou/articles/4481191.html #include <iostream> #include <cstdi ...
- Java——英文字母---18.10.11
package lianxi;import java.io.*;import java.util.Scanner;public class file{ public static void main ...
- java加密用到了BASE64Decoder时报错信息:Access restriction: The type BASE64Encoder is not accessible due to restrict
在Eclipse中编写Java代码时,用到了BASE64Decoder,import sun.misc.BASE64Decoder;可是Eclipse提示: Access restriction : ...
- python脚本退出后 不应该为负值
Python sys.exit的退出代码 sys.exit(n)介绍 功能:执行到主程序末尾,解释器自动退出,但是如果需要中途退出程序,可以调用sys.exit函数,带有一个可选的整数参数返回给调用它 ...
- P1855 榨取kkksc03
P1855 榨取kkksc03 题目描述 以下皆为真实的故事. 洛谷2的团队功能是其他任何oj和工具难以达到的.借助洛谷强大的服务器资源,任何学校都可以在洛谷上零成本的搭建oj并高效率的完成训练计划. ...