简化和优化 CSS 代码以减少 CSS 文件大小的方法

为什么我们需要尽可能最小的 CSS 文件？这主要基于两个考虑：流量和读取速度。小 CSS 文件可以节省服务器流量并减少用户打开网页所需的时间。不仅节省了流量成本，还提供了更好的用户体验。让我们看看一些减少 CSS 的方法。

1。简化您的注释
在许多情况下，尤其是 程序员 处理 C/Java 等语言开发时，您可能需要编写多行注释，例如：
在编译语言中，如本例。注释当然没有问题，但在 CSS 中它们会显着增加 CSS 文件的大小。您应该尝试像这样简化它：
这可以减少文件大小，同时保持可读性。在 CSS 文件的真实发布版本中，您甚至可以完全删除这些注释。

2。简化颜色代码
在 CSS 中，我们经常处理十六进制颜色代码。你可能习惯这样写“标准形式”：
color: #ffffff;
color: #ff88ff;

这种写法在CSS中可以简化，我们可以写：
color: # fff;
套装：#f8f;

3。使用单行属性而不是多行属性
在CSS中，margin/padding/font/border等属性可以用一行来设置，而不是多行。 ，例如：
padding-top: 10px;
底部填充：10px；
左填充：0；
右内边距：0；

我们可以这样写：
padding: 10px 0 10px 0;

顺序是上、右、下、左。对于margin和padding属性来说，如果left和right/top和bottom的值相同的话当然可以写得更简单。例如上面的例子可以写成：
padding: 10px 0;

如果上下左右都一样，甚至可以写成：
padding: 10px;

其他缩写方法可以查阅网上的一些资料。当然，我推荐使用TopStyle这个软件来边学习边写CSS，它提供了具体的技巧。

4。当值为0时，可以省略单位
。例如：填充：0；

5。同时设置多个元素的属性
示例。例如：
h1 {
边距：0；
填充：0；
}
h2 {
边距：0；
填充：0；
}
h3 {
margin: 0;
padding: 0;
}

更好的写法是这样的：
h1,h2,h3 {
边距： 0;
填充：0;
}

6。去除空格和换行符
这是一个很不起眼的操作，但是对于已经脱离开发、需要应用到网页上的CSS来说是需要做的。至少所有谷歌应用程序都是这样做的。例如：
h1 {
边距：0;
填充：0;
}
块引用 {
背景颜色：#ffcccc;
}

必须是合并到：
h1{margin:0;填充：0;}
块引用{背景：#fcc;}

事实上，在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性，我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作，因此它将不会影响你的开发过程。

7。设置过期时间并使用GZip
如果情况允许，我们需要设置CSS文件的过期时间并启用GZip传输CSS文件。通过设置前者，流行的浏览器可以缓存您的 CSS 文件，从而避免每次执行加载时都需要读取文件，从而显着加快进程，同时减少流量消耗。启用 GZip 可以将 CSS 文件的大小减小到难以想象的程度，现在大多数流行的浏览器都支持 GZip。