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.
If you’re one of the few people that grace my Adium contact list pretending to be away, you should have observed it so far: I gave up on IM. I just had to.
It wasn’t that hard, I just stopped using this means of communication. Nowadays, I mainly use Twitter and e-mail to get in touch with people, the former more so than the latter. OK, I do use IM, but just for intranet purposes at work, using our homemade Pathfinder Instant Messenger. And that’s about it.
Why, I can hear you ask. I’ll tell you why. Because it’s so damn time-consuming I couldn’t do anything with Adium in the background anymore. It was the feeling that I cheated on people and made them feel bad when I wasn’t promptly replying to their messages. That’s why I found Twitter so liberating: noone expects you to be there and reply to every given moment. Well, noone should anyway.
So at first was productivity. I found myself more productive and efficient while at home. I wrote more, designed more and learned more. I learned to manage Twitter distractions and incorporate it in my workflow without serious drawbacks. And everything was fine for a while.
But I lacked something, and that was real-time human communication. And for that, I decided to take my Friday (traditionally at home) nights on IM. Just to keep in touch with friends and add to the overall relaxing feeling. Some light gossip, some link exchanging and that’s it. You give a little but you gain a sense of social satisfaction.
So I was wondering, am I the only one that declared IM bankruptcy? Surely there are more of you that just stopped using it at some point.
Do you still keep tabs on IM friends by logging in every once in a while? Or you just use Twitter and Facebook to communicate with people?
Do share your opinions in the comments.
First thing in the morning, I check my Twitter. Sad, I know, but I guess Twitter for me is something like watching the news with a cup of coffee for others.
Today was a different day. Everyone was rambling about some missing feature on Twitter, tagging their blazing tweets with #fixreplies. I didn’t realize what the fuss was, until I read an insightful comment at some blog: Twitter has removed the option to get replies from people you know to people you don’t, making users’ streams a far quieter place.
Following me so far? Good.
You know why I didn’t realize what’s the problem? Because I had that friggin’ option turned off.
It was the only way I could take control of my buzzing Twitter stream and keep it (relatively) noise-free. And I wonder, seriously, how can people cope with all the noise coming from their chatty followers. But choices are choices, I won’t judge.
So all of a sudden, there’s a Twitter revolt.
Don’t get me wrong, I’m all for user rights and all. But I think the whole #fixreplies thing has gone (already!) too far. Why?
People adding stuff in front of their @replies to get them public.
Seriously, people. Don’t. Why?
- It breaks conversations. Twitter (and other relevant applications) cannot track conversations (in reply to) between users if you keep adding nonsense in front of your @replies. So we lose in context.
- It obliges us, Twitter users that had this option turned off, to see each and every one reply of yours, even if we don’t. Frigging. Care.
- It makes you look like a spoilt brat. Even if you’re papa Meyer or my beloved Andy.
- It’s utterly spammy for no reason and all.
So the problem is, people: You’re getting the whole issue to other users and NOT Twitter. Don’t blame us. Don’t flood us. Follow proper online policy, breathe deeply, shut down your machine and get a drink.
Then come back and forget all about it in, like, two days. You’ve done this before.
Disclaimer: If this ridiculousness goes on, I’ll start unfollowing people. Not that you care, but I thought I should share the thought.
