sugarenia.com

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.

Spring comes and passes by with some interesting free-time projects.

Stelios and me started working on a simple thingy, just because. It’s called FancyCage and it’s fun.
If you’re curious about what-the-heck this is, just look around the landing page. There’s gotta be a comment hint somewhere!

You can subscribe and keep in contact with FancyCage by filling in your e-mail address in its brand-new landing page. Or just follow the #fancycage Twitter stream for real-time updates.

Keep posted for more!

I’ve expressed my heavy crush sex relationship love for Twitter before. Buzz and social media aside, it’s the only social thing that stays on during all my day, keeping me connected to interesting (or not) people, who have some nice (or not) things to share.

It’s only normal that I’ve tried a dozen of Twitter clients during those years, both for the Mac and the iPhone. I liked some, I loved a few, but I keep going back to my initial choice: Twitterrific, for both environments.

I really cannot get the whole fuss about feature-rich clients, to be frank. User lists and the whole hullaballo spoil big time the direct effect of Twitter I love so much. I suspect that people use lists to avoid the noise from particularly vocal Twitters, but if you never check someone’s tweets, why have him in the follow list anyway?

From time to time I go to un-follow sprees – but they’re short. I think my list now is noise-less enough and I intend to keep it that way. And I tweet mostly in afternoons and weekends, when I supposedly have more time to spare, I guess.

So my question is: How do you Twitter? What do you use? When do you tweet the most?

I’d be fascinated to learn about your tweeting schemes. Shoot me.