如何优化CSS代码？

Question

我应该如何优化CSS代码？有各种CSS3行，如-moz-和-webkit-，border-top-left-radius等。我相信更大的CSS文件会显着增加页面加载时间。

还有一个问题：我写了很多代码，但有些代码却未被使用。我有超过2000行CSS代码，我打赌大约200-300行可以删除，甚至可能更多。是否值得修改所有代码？这需要一段时间......

Answer 1

在将它们上传到服务器上之前

GZip the files

它会显着减少文件大小

编辑：GZipping的影响 -

通过在Bargaineering上压缩.css文件，其规模从28.2K降至7.3K，节省了74.1％。

Answer 2

• 始终删除最后一个分号：

  body { background: black; color: white; }
   到
  body { background: black; color: white }

• 合并多个属性：

  .class { margin-top: 10px; margin-right : 20px; margin-bottom: 30px; margin-left: 40px; }
  到
  .class { margin: 10px 20px 30px 40px; }

• 使用简单的颜色（而不是`#FFFFFF, #AABBCC, #FF0000放#FFF, #ABC, #F00）

• 最重要的事情：minify your code在服务器上传之前。它将删除空格和注释，并显着减少代码和文件大小。

Answer 3

文件越小，下载速度越快，用户渲染样式的速度就越快。有各种缩小脚本，我会查看YUI Compressor：http://refresh-sf.com/yui/