如何写一个很小的 CSS 文件

最新推荐文章于 2022-09-09 19:32:46 发布

转载最新推荐文章于 2022-09-09 19:32:46 发布 · 770 阅读

文章标签：

#css #comments #xhtml #浏览器 #语言 #google

本文介绍了一系列有效减少CSS文件大小的方法，包括简化注释、颜色代码、使用单行属性、设定多个元素属性、删除空白和换行及GZip压缩等。

看了这篇文章，想想自己也经常和 CSS 打交道，对于压缩 CSS 还是有一点心得。总结一下，和大家分享。

我们知道，在 XHTML+CSS 布局流行的今天，CSS 已经成为一个网站事实上的“门面”。那么为什么我们需要一个尽可能小的 CSS 文件呢？这主要是基于流量和读取速度两方面考虑。小的 CSS 文件可以节省你的服务器流量，同时缩短用户打开你网页所需的时间。既节省了流量开支，又获得了更好的用户体验，何乐不为呢？下面我们一起看看有哪些缩小 CSS 的方法。

简化你的注释
很多情况下，特别是曾经从事过 C/Java 等语言开发工作的程序员，可能会喜欢写多行注释，例如：
/*————————*/
/*—comments——–*/
/*————————*/
在编译语言中这样的注释当然没有问题，但在 CSS 中他们会显著的增大 CSS 文件的体积，应该尝试简化成这样：
/*Comments*/
这样在保持可读性的同时，减小了文件体积。事实上，在一个真正发布版本的 CSS 文件中，你完全可以去掉这些注释。
简化颜色代码
在 CSS 中，我们经常会跟十六进制颜色代码打交道。你可能习惯于写成以下“标准形式”：
color: #ffffff;
color: #ff88ff;
事实上，在 CSS 中是可以简化这个写法的，我们可以写成：
color: #fff;
color: #f8f;
使用单行属性代替多行属性
在 CSS 中像 margin/padding/font/border 等属性均可以用一行来代替很多行设置，例如：
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 的过程中学习，它会给出具体提示。
当值为 0 时可省略掉单位
例如：padding: 0;
同时设定多个元素的属性
举例说明。例如：
h1 {
    margin: 0;
    padding: 0;
}
h2 {
    margin: 0;
    padding: 0;
}
h3 {
    margin: 0;
    padding: 0;
}
更赞的写法是这样：
h1,h2,h3 {
    margin: 0;
    padding: 0;
}
删除空白和换行
这是个很不起眼的操作，但对于脱离了开发阶段，而要应用在网络上的 CSS 而言应该进行这样的处理，至少 Google 所有应用都是这样做的。举个例子：
h1 {
    margin: 0;
    padding: 0;
}
blockquote {
    background-color: #ffcccc;
}
应该处理成：
h1{margin:0;padding:0;}
blockquote{background:#fcc;}
事实上，在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性，我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作，因此它将不会影响你的开发过程。
设定过期时间，使用 GZip
如果有条件的话，我们应该设定 CSS 文件的过期时间，并开启 GZip 来传输 CSS 文件。设定前者可以让流行的浏览器缓存你的 CSS 文件，从而避免每次 Load 都要读取文件，大大加快速度同时也降低流量消耗。而开启 GZip 则可以让你的 CSS 文件缩小的难以想象的程度，而且如今流行的浏览器都是支持 GZip 的。