Question

可以从哪些方面用css样式优化网站页面

Answer 1

css优化页面是这样的：
1、首先现在主流的网站都是采用div+css的网站结构来实现的，这样的好处是网站的骨架由HTML来实现，其中的所有样式都是使用css来实现的，这样避免了改版的麻烦，这本身就是网页的优化，减少了前端的工作量。
2、简单的css优化需要注意一下几点：
1）注意不要有冗余代码，比如可以继承父元素的样式不要重复写，直接继承就可以了，节省了代码量，是代码更加清晰。
2）统一样式，有时不同的页面或者是页面的不同部分需要相同的样式，此时需要注意要统一样式不要重复。

Answer 2

1、把样式表置于顶部，有限加载css，避免网页刚开始加载先变形后正常的现象
2、使用外部css，link引用，这样可以让浏览器缓存css文件，加载速度更快
3、删除无用css，注释，合并css代码，然后压缩css代码（压缩代码工具：http://tool.chinaz.com/Tools/CssFormat.aspx）
合并：
如：
background-color: #000;
background-image: url(image.jpg);
background-position: left top;
background-repeat: no-repeat;

可以写成一句话：background: #000 url(image.jpg) top left no-repeat; 减少代码量

4、减少请求数，背景图片合并，使用CSS Sprites（CSS精灵） 技术，详细介绍：http://www.cnblogs.com/dolphinX/p/3348460.html
5、避免适用通配符或隐式通配符，如*{margin:0px} 这样运行效率很低

Answer 3

1、模版里面尽量不要出现CSS样式,方便后期维护
2、减少重复CSS,无效样式,冗余样式,减少体积
3、规范代码,一目了然
4、分批管理，按需引进,重复利用，资源最大化

Answer 4

排版，布局，尽量少的使用css

Answer 5

　　加载性能
　　这个方面相关的 best practice 太多了，网上随便找一找就是一堆资料，比如不要用 import 啊，压缩啊等等，主要是从减少文件体积、减少阻塞加载、提高并发方面入手的，任何 hint 都逃不出这几个大方向。
　　选择器性能
　　selector 的对整体性能的影响可以忽略不计了，selector 的考察更多是规范化和可维护性、健壮性方面，很少有人在实际工作当中会把选择器性能作为重点关注对象的，但也像 GitHub 这个分享里面说的一样——知道总比不知道好。
　　渲染性能
　　渲染性能是 CSS 优化最重要的关注对象。页面渲染 junky 过多？看看是不是大量使用了 text-shadow？是不是开了字体抗锯齿？CSS 动画怎么实现的？合理利用 GPU 加速了吗？什么你用了 Flexible Box Model？有没有测试换个 layout 策略对 render performance 的影响？这个方面搜索一下 CSS render performance 或者 CSS animation performance 也会有一堆一堆的资料可供参考。
　　可维护性、健壮性
　　命名合理吗？结构层次设计是否足够健壮？对样式进行抽象复用了吗？优雅的 CSS 不仅仅会影响后期的维护成本，也会对加载性能等方面产生影响。这方面可以多找一些 OOCSS（不是说就要用 OOCSS，而是说多了解一下）等等不同 CSS Strategy 的信息，取长补短。