Question

我测试了一些CSS压缩器，说实话，我很失望。也许我只是尝试过错了？

起点如下，故意不好的css代码：

.a{
   font-size: 10px;
   padding: 0 6px;
   text-align: center;
}
.b{
   font-size: 11px;
   padding: 0 6px;
   text-align: center;
}

这很明显，在两个类中声明3个属性中的2个并且产生185个字节的代码时是无意义的。如果您手动更好地编写它，它将看起来像

.a, .b{
   padding: 0 6px;
   text-align: center;
}
.a{
   font-size: 10px;
}
.b{
   font-size: 11px;
}

有点小（149字节）或甚至

.a, .b{
   padding: 0 6px;
   text-align: center;
   font-size: 10px;
}
.b{
   font-size: 11px;
}

之前是133个字节，

.a,.b{padding:0 6px;text-align:center;font-size:10px}.b{font-size:11px}

压缩后只有71个字节。这将是原始尺寸的100/185 * 71 = 38.3％。

然而所有的压缩都是：

.a{font-size:10px;padding:0 6px;text-align:center}.b{font-size:11px;padding:0 6px;text-align:center}

这是100个字节。

当然，在一个理想的世界中，你只需要编写更好的CSS代码，但是如果你编写更大的文件就不容易，如果你使用任何框架，这几乎是不可能的。

那么，是否有更好的工具可以产生上述示例代码的71字节？

Answer 1

Gzip个文件

通过在Bargaineering上压缩.css文件，其规模从28.2K降至7.3K，节省了74.1％。该文件的响应时间从53毫秒增加到39毫秒，节省了26.4％。

Answer 2

压缩可能看起来微不足道，但您还期望它做什么呢？你可以想象的任何类型的CSS压缩器只会在你修改你的代码之前把你带到目前为止。

CSS毕竟是不是一种编程语言。

Answer 3

当你在CSS压缩之后使用gzip时（就像大多数性能指南所建议的那样），你会得到不同的结果，因为CSS压缩器的输出更好拉链。

CSS压缩版本在gzip之后是85字节，你的是gzip后的89字节。

因此，在CSS压缩后使用gzip时，工具中的代码会获胜。此外，结果更像原始代码，因为过度优化会破坏您的CSS，从而为错误留下更少的空间。

但是，你的CSS代码在71字节的解压缩版本中获胜。

您所做的优化有一个非常本地化的用例，其中选择器在CSS文件中彼此相邻。

显示问题的一些示例小提琴：

.a {
    height:50px;
    width:50px;
    background-color: yellow;
}

.b {
    background-color: red;
}

.c {
    background-color: yellow;
}