如何优化 CSS 代码？答案

【问题标题】：How to optimize CSS code?如何优化 CSS 代码？
【发布时间】：2012-07-22 20:13:32
【问题描述】：

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

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

【问题讨论】：

Chrome 的开发工具可以告诉你哪些 CSS 规则没有被使用...
修改代码不是一个坏主意。
如果您确保 CSS 文件被缓存（在浏览器中），那么无论 CSS 文件有多大，这都不成问题...
这很好，我确实使用了缓存脚本。虽然，首次访问者的加载时间会更长。第一印象是最重要的，不是吗？
@Jack 重要的是内容。我经常访问一些非常慢的网站，但我仍然访问它们，因为我喜欢它们的内容。 :)（例如 Zelda Informer，Game Informer 上的 Replay Hub）

【解决方案1】：

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

它会显着减小文件大小

编辑：GZipping 的效果 -

通过在 Bargaineering 上对 .css 文件进行 gzip 压缩，其大小从 28.2K 降至 7.3K，节省了 74.1%。

【讨论】：

【解决方案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 put #FFF, #ABC, #F00）
最重要的是：minify your code在上传到服务器之前。它将删除空格和 cmets，并显着减少您的代码和文件大小。

【讨论】：

【解决方案3】：

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

【讨论】：