新手如何精简优化CSS代码?看完你也就会了

1.简化你的注释

很多情况下，特别是曾经从事过 C/Java 等语言开发工作的程序员，可能会喜欢写多行注释，例如：

在编译语言中这样的注释当然没有问题，但在 CSS 中他们会显著的增大 CSS 文件的体积，应该尝试简化成这样：

这样在保持可读性的同时，减小了文件体积。事实上，在一个真正发布版本的 CSS 文件中，你完全可以去掉这些注释。

2.简化颜色代码

color: #ffffff; color: #ff88ff;

事实上，在 CSS 中是可以简化这个写法的，我们可以写成：

color: #fff; color: #f8f;

3.使用单行属性代替多行属性

padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0;

padding: 10px 0 10px 0;

顺序为上、右、下、左，当然，对于 margin 和 padding 属性，当左右/上下的值相同时，还可以写的更简单，例如上面的例子，可写为：padding: 10px 0;

上下左右都相同时，甚至可以写成：

padding: 10px;

对于其它缩写方法，可以参考网上一些资料。当然，我更推荐使用 TopStyle 这款软件在写 CSS 的过程中学习，它会给出具体提示。

4.当值为 0 时可省略掉单位

例如：padding: 0;

5.同时设定多个元素的属性

h1 { margin: 0; padding: 0; } h2 { margin: 0; padding: 0; } h3 { margin: 0; padding: 0; }

h1,h2,h3 { margin: 0; padding: 0; }

6.删除空白和换行这是个很不起眼的操作，但对于脱离了开发阶段，而要应用在网络上的 CSS 而言应该进行这样的处理，至少 Google 所有应用都是这样做的。举个例子：

h1 { margin: 0; padding: 0; } blockquote { background-color: #ffcccc; }

h1{margin:0;padding:0;} blockquote{background:#fcc;}

7.设定过期时间，使用 GZip

如果有条件的话，我们应该设定 CSS 文件的过期时间，并开启 GZip 来传输 CSS 文件。设定前者可以让流行的浏览器缓存你的 CSS 文件，从而避免每次 Load 都要读取文件，大大加快速度同时也降低流量消耗。而开启 GZip 则可以让你的 CSS 文件缩小的难以想象的程度，而且如今流行的浏览器都是支持 GZip 的。

以上就是对新手如何精简优化CSS代码的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。

以上就是新手如何精简优化CSS代码?看完你也就会了的详细内容，更多内容请关注技术你好其它相关文章！