1. 首页
  2. 问答
  3. 如何优化CSS代码？

如何优化CSS代码？

2012-07-21 94 views
0

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

另一个问题：我写了相当多的代码，但其中一些代码没有被使用。我有超过2000行的CSS代码，我打赌大概200-300行可能会被删除，甚至更多。值得修改所有的代码吗？这将需要相当长的一段时间......

来源

2012-07-21 Jack

+0

Chrome的开发工具可以告诉你哪些CSS规则没有被使用...... – 2012-07-21 17:31:19

+1

修改你的代码并不是一个坏主意。 – dave 2012-07-21 17:32:27

+1

如果确保CSS文件被缓存（在浏览器中），不管CSS文件有多大都不应该成为问题...... – 2012-07-21 17:32:32

回答

4

GZip the files上传他们在服务器

这将减少文件之前显著大小

编辑：gzip压缩的影响 -

通过使用gzip压缩的。关于Bargaineering的css文件，其大小从28.2K降至7.3K，节省了74.1％。

来源

2012-07-21 17:31:12 Dipak

0

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

来源

2012-07-21 17:32:38 Wex

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上传服务器之前。它将删除空格和注释，并显着减少代码和文件大小。

来源

2012-07-21 17:33:41

+2

'margin：10'将不起作用（它只适用于'0'）。此外，删除最后一个分号是矫枉过正的。 – 2012-07-21 17:37:31

+0

感谢您的更正。删除了。 我见过很多关于删除最后一个分号的建议，我从来没有看到有人说这是坏的。但是，我更喜欢总是使用分号。这是一种习惯+稍后添加代码会更容易。 – 2012-07-21 17:52:53

+0

您的左右边距值是向后的，在缩短的例子中应该是10px 40px 30px 20px。 – austincheney 2012-07-22 12:12:30

相关问题

 相关问题