Question

The drumbeat of writing terse CSS code has been beaten into my head for years. For example:

Do this:
.foo,.bar{
color:#f00;
}

Not this:
.foo{
color:#f00;
}
.bar{
color:#f00;
}

With GZIP compression isn’t it irrelevant how I write the above CSS? Since GZIP will create a dynamic library with color:#f00 as a single instance and use pointers to its multiple uses. I want to know because it is more convenient to repeat style definitions versus searching for an identical declaration.

Answer 1

It depends on what you try to achieve:

• If .foo and .bar need to have the same colour, you´re better of using the first method because it is easier to maintain.
• If your first statement is a result of you manually optimizing your file-size, and it´s just a coincidence that .foo and .bar have the same properties, I would definitely split it and use the second solution.

In the end gzip and / or a css compressor will handle the file size so I wouldn´t worry about that.

Worry about maintainability and readability instead.