对于流量比较少的普通网站，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
转载于：https://blog.csdn.net/zhanghuiqi205/article/details/78434727 感谢前辈