Introducing: Compact Multi-line CSS!
Ah, the smell of freshly written CSS code on Friday nights. What’s not to love.
Over my (few) years of web design experience, I’ve become
(Don’t look at this site source code – it’s not mine. It’s an adapted template – yep, don’t ask when my new template will launch).
One thing that’s pretty important while authoring CSS for relatively large projects is the way you structure it. We’ve already discussed single-line or multi-line in this blog, plus the way you define sections and so-called variables in your CSS are already known topics. But I’ve decided to beat that dead horse a bit more.
Multi-line doesn’t cut it and single-line sucks
There’s a way to structure CSS that I want to experiment with.
I think that multi-line CSS is very readable but a total waste of whitespace and bandwidth. I also think that single-line CSS can become exceptionally tedious, especially with properties like
border-radius, that require at least three lines to work relatively consistently across all modern browsers. Working in multi-line CSS and converting it to single-line just before publishing sounds a bit like an overkill to me, all those back and forths!
So what do we get when we mix the best elements of both methods?
The compact multi-line CSS structure! Tada!
*crickets chirping in background*
Well yeah, lemme show you how it’s (supposed to be) done.
How it’s done
In compact multi-line CSS, you keep the multi-line-ity of it all, but you group “relevant” properties. You know which they are:
margin goes hand in hand with
font properties should propably go hand in hand with
letter-spacing, et cetera, et cetera.
Let’s take an excerpt of my CSS3.gr CSS and try to convert it:
In compact multi-line, that would be:
We’ve gone from 8 lines to 5, without sacrificing readability much. How about:
…which gets the short treatment to…
That’s 8 lines to 3! Quite a score, innit?
Of course, your mileage may vary and benefits won’t always be that obvious. Nevertheless, nothing restricts you from further improving this method, by alphabetizing your inline properties or put them in the order that just feels logical for you (for me,
width is always before
Hey, at least I tried.