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 anal pretty worked up with what my code looks like. It must be an old trauma from my university years, where well-written code well, let’s say, wasn’t exactly the norm (.c include files – yes, I’ve seen that with my very own eyes). As a result, be it HTML or CSS or PHP or Javascript, I can now proudly say: I write girl code.

(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 padding, position loves top, left, right, bottom, font properties should propably go hand in hand with line-height and letter-spacing, et cetera, et cetera.

Let’s take an excerpt of my CSS3.gr CSS and try to convert it:

.about-more h4  {
  padding: 0;
  margin: 0;
  border: none;
  color: #666;
  font: 14px Georgia, "Times New Roman", serif;
  text-transform: none;
  letter-spacing: normal;
  position: relative;
}

In compact multi-line, that would be:

.about-more h4  {
  margin: 0; padding: 0;
  font: 14px Georgia, "Times New Roman", serif; text-transform: none; letter-spacing: normal;
  border: none;
  color: #666;
  position: relative;
}

We’ve gone from 8 lines to 5, without sacrificing readability much. How about:

#footer-disclaimer  {
  text-align: center;
  font: 10px Georgia, "Times New Roman", serif;
  text-transform: uppercase;
  background: url(./themes/site_themes/css3/skeleton/disclaimer-bg.png) no-repeat top;
  color: #97ACA3;
  letter-spacing: 1.2px;
  padding: 20px 0 10px;
  margin-top: -10px;
}

…which gets the short treatment to…

#footer-disclaimer  {
  font: 10px Georgia, "Times New Roman", serif; text-align: center; text-transform: uppercase; letter-spacing: 1.2px;
  background: url(./themes/site_themes/css3/skeleton/disclaimer-bg.png) no-repeat top; color: #97ACA3;
  margin-top: -10px; padding: 20px 0 10px;
}

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 height and margin before padding).

I haven’t used it (yet), but I think I’ll try it in the FancyCage CSS I’m putting together. Well it’s no Typekit, but it may help you a bit while structuring CSS.

Hey, at least I tried.