When GZIPped, is this …
h1 {
font-size: 3em;
font-weight: bold;
}
h2 {
font-size: 2em;
font-weight: bold;
}
b, strong {
font-weight: bold
}
… substantially different from this …
h1,h2,b,strong{font-weight:bold}
h1{font-size:3em}
h2{font-size:2em}
… when it comes to file download size?
(Obviously, this is short enough that it won't really matter. But on an enterprise-level site with thousands of classes, is one of these going to be radically different from a file-size perspective? Also: There are other benefits to extracting out common code, but I'm wondering at the moment about file size.)
I would argue this needs some testing with larger files. (I ran a quick test and given the small file size of your second example, it actually got larger due to gzip compression)
I would argue that it would be good to do both. By "collapsing" the CSS first you can apply syntactical compression of the data that gzip can't use but then gzip can get rid of normal runs and repetitions.
gzip is a great, "free" way to make things smaller (at the expense of some CPU cost).