Are there really clever CSS compressors? [closed]

Question

I tested some CSS-compressors and to be honest, I'm disappointed. Maybe I just tried the wrong ones?

Starting point was the following, intentionally bad css-code:

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

which is, pretty obvious, nonsense in declaring 2 of 3 properties in both classes and results in 185 bytes of code. If you write it better manually it would look like

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

which is a bit smaller (149 bytes) or even

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

which is 133 bytes before and

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

only 71 bytes after compression. This would be 100/185*71 = 38,3% of the original size.

What all compressions did however was:

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

which is 100 bytes.

Of course, in an ideal world you would just write better CSS code on the first hand, but that's not easy if you write larger files and almost impossible if you're using any frameworks .

So, are there any better tools out there that result in something like 71 bytes for the above example code?

Answer 1

Gzip the files

By gzipping the .css file on Bargaineering, its size dropped from 28.2K to 7.3K, a 74.1% savings. Response time for that file went from 53ms to 39 ms, a 26.4% savings.

How to GZip CSS Files