When people argue over how to organize their CSS, the debate usually comes down to two approaches: multi-line vs. single-line. Obviously both have their benefits and drawbacks, but they aren’t the only two viable options. One technique I’ve been using more and more recently is a combination of the two styles.
For lack of a fancy name I just call it multi-single-line CSS. The premise is pretty simple: maintain the legibility of multi-line CSS while shortening total file length. The way it works is that you group similar attributes (for example width and height) onto a single line. In doing so, you’re saving space while making connections between attributes that are often referenced together.
As you can see, it’s a nice middle ground between long and short. Here are a couple more examples pulled from my CSS file:
Hopefully you find it useful, and if you have any suggestions to make it better I’d love to hear ‘em!