With GZIP, Can I write 'Sloppy' CSS (and other type of code) code?

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

I think you would still want to continue using the first method because it's more readable. Having a separate section for every thing will make you css bloated and difficult for people to get through it.

Answer 2

You could use a css minifier before publishing and stop worrying about readability and file size.

GZIP will definitely have a bigger before/after size impact with 'sloppy' CSS files, but having the smallest file possible before compression, is alwaysmost of the time a good thing^tm, as it will be marginally smaller.

---

Remember: Source code is for humans to read, and only incidentally for machines to run.

Answer 3

If that makes sense, go for it. Otherwise, I'd write the CSS in a logical fashion so it can be maintained properly, and then rely on gzip + a CSS compressor (like YUI Compressor) to handle the dirty work for you.

Answer 4

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.