对于流量比较少的普通网站,CSS本身的性能并不突出,因此,提高CSS的可读性和可维护性相对性能来说,更重要一些。一般情况下,我们都是在确保CSS代码的可读性和可维护性的前提下,再去考虑它的性能速度。但是对于大型网站,比如淘宝,京东,改善性能是非常具有实际意义的。我写这篇,主要从四个方面说一下自己在项目中的实际运用。
1.CSS的写法:
在CSS中,很多属性都有它的集合版本,比如padding,margin,border,background,font属性等等。可以将left,right,top,bottom整合在一起,这样可以减少字符数,使得CSS代码量更少。
2.充分利用CSS的继承的特点,减少代码的书写。在CSS中很多文本相关的书写,列表相关的属性,颜色相关的书写都是具有继承性的。利用这一点可以大大减少代码量。关于这一点,我也曾写过类似的文章,大家有兴趣的可以看一下。http://blog.csdn.net/zhanghuiqi205/article/details/55805493
3.压缩工具的使用:
很多时候,我们在发布程序的时候,都会对代码进行压缩合并,现在有很多自动化构建的工具,给我们带来的大大的方便。压缩工具,不仅仅可以压缩CSS,还可以压缩图片,生成雪碧图。或者生成体积较小的图片,都是不错的想法。不过我们项目中很多都是使用的字体库图标来代替图片。使用频繁的就是阿里字体库iconfont和icomoon上面的文件。对于字体库的文章,我之前也曾写过一篇文章,感兴趣的可以看一下。http://blog.csdn.net/zhanghuiqi205/article/details/65434062
4.高性能的选择器:
一般情况下,我们阅读代码是从左到右的阅读,但是浏览器对于选择器的规则是从右向左进行解析的。对于像#box .content div{width:100px},解析的时候,首先查找所有的div元素,再在div元素是否存在具有content类的父元素,最后在已经匹配的父元素中继续向上查找祖先元素是否含有id为box的元素。知道了浏览器解析选择器的原理,那么我的建议是:
不要使用通配符,因为通配符的匹配量非常大,一般情况下不建议使用。
不要再id选择器以及class选择器前添加元素名。
选择器最好不要超过三层,位置靠右的选择条件尽可能精确。
避免使用后代选择器,尽量少用子选择器。
上述一些优化的建议,是在CSS可读性和维护性的前提下,流量比较大的网站使用,但是养成好的书写习惯也是很不错的,写一手优雅的CSS也是前端工程师具备的基本功。
当然我一直致力于写一个CSS3.0常用使用库的构建,正在github创建,希望大家可以关注,一起学习。https://github.com/zhanghuiqi205/CSS--Effects-collection