Why each CSS property should have its own line

A few months ago, Arjan Eising (@arjaneising) tweeted a quick poll about CSS formatting:

CSS Poll: do you place your CSS properties on one line per selector (compact), or do you use one line per CSS property (expanded)?

To put it another way, expanded is:

.monkey {
    background:#fff url(/images/monkey-bg.png) repeat-x 0 0;
    border:1px solid #fde;

compact is:

.monkey {background:#fff url(/images/monkey-bg.png) repeat-x 0 0;border:1px solid #fde;display:block;font-size:123.1%;margin:1em;text-transform:uppercase;}

I replied:

Expanded. Compact only works if you’re the only person maintaining it & don’t use source control. Otherwise, it’s stupid.

Now, I feel the need to defend this statement, because “stupid” is an emotive word, and it’s not one I use lightly. The nicest thing a colleague has ever said about me was that I “express strong opinions without threatening to break your fingers,” and calling something “stupid” is about as close to violence as I get. (Unless you get me started on RyanAir…but that’s another story.)

The first thing to notice about my comment is that it’s qualified: if you are the only person working on your CSS code, and you don’t use source control, then fine. Knock yourself out. Write the code however you want. Use single-letter class names for all I care. (Because they’re shorter and save bytes! But only lowercase single-letters because they compress better!) They key point is: you’re not harming anyone else.

But: if you use source control, that shows you care about before and after and the ability to keep a history of what’s going on with your code. Source control is all about changes between once version and the next, and no matter whether you are using a side-by-side or inline viewer to see the differences between two revisions, a shorter line length makes it easier to visually identify those differences.

Viewing differences becomes even more important as soon as there is more than one person working on the code, because you will be looking at the changes that other people make. The change between two revisions can often give you more information about the reason for a change than the new code can give you on its own. When it comes to maintaining a piece of software over a non-trivial lifetime, change tracking is vital to understanding both the codebase itself, and the underlying (business) requirements.

See, it’s not the readability of long lines in themselves that I question (research is vague, but I’m comfortable saying that 200-character lines help no-one); I’m more concerned about the secondary problem of being able to manage and understand changes in those lines over the long term and/or in a coding environment where you’re not the only contributor.

The best way to do this is to write each property on a single line. Writing single-line CSS rules harms maintainability, which is a bad thing. There is no technical reason to prefer compact CSS over expanded CSS (rule 1 applies to CSS as well as JavaScript), so the reason for writing single-line CSS is a personal preference. In my mind, it’s up there with smoking.

Okay, maybe not that bad. Most CSS won’t give you cancer. But I’m going to stick to my original assessment of “stupid”. I won’t break your fingers, but I will swear a lot while reading your code.

That said, there is an editability (as opposed to readability) argument to be made against long lines as well. This comes down to Fitts’ Law: if each property is on its own separate line, when you want to hit that property with your mouse pointer, you’re aiming for a much wider target than if the property is nestled somewhere in the middle of a single long line, as shown in the image below:

And if you prefer to use the keyboard, it takes fewer keystrokes to navigate and manipulate multi-line CSS than the single line versions. (Unless, of course, you use emacs, in which case there’s probably already a command to insert all those border-radius properties you wanted you to add.)

Further reading:

Radio Sunpig 2009: Thicker Ice

Reading about playlists this afternoon reminded me that I still hadn’t posted Radio Sunpig 2009…and it’s August of 2010 already. (Nothing new there, then.) But I can honestly say that I finalized the playlist itself at the beginning of January, and the artwork shortly thereafter. I even issued a couple of prototype CDs at the end of February, but it never went to a full production run (of the usual 7 copies). Oh well.

Radio Sunpig 2009 is subtitled “Thicker Ice” because it felt like in 2009 the Sutherland household was on a more solid footing than in 2008. It still had plenty of ups and downs, but the ups were upper and the downs were less down. A good foundation for 2010. And musically, it saw me start going out to live gigs again. Which is awesome. And any year in which I can get to see the Tragically Hip twice in the space of a single week has got a hell of a lot going for it.

  1. Battles – Atlas
  2. Fight Like Apes – Tie Me Up With Jackets
  3. Frightened Rabbit – The Greys
  4. Phoenix – 1901
  5. Apes & Androids – Nights Of The Week
  6. School Of Seven Bells – Half Asleep
  7. The Heavy – How You Like Me Now?
  8. Deastro – Daniel Johnson Was Stabbed In The Heart With The Moondagger
  9. Idlewild – To Be Forgotten
  10. The Gaslight Anthem – The ’59 Sound
  11. Bleu – Boy Meets Girl
  12. The Temper Trap – Sweet Disposition
  13. Wintersleep – Oblivion
  14. Charlotte Hatherley – White
  15. The Tragically Hip – Queen Of The Furrows
  16. Cruiser – A Gentle Press
  17. The Decemberists – The Hazards Of Love 4 (The Drowned)

As usual, message me for a download. You can’t get all of these tracks on Spotify 🙂

Barenaked Ladies at the Mountain Winery (Saratoga), 19 July 2010

I’m a big fan of the Barenaked Ladies. I love their music, the time I saw them live in 2001 was once of the best gigs I’ve been to. They brought heaps of energy and enthusiasm to the stage, and it looked like they were really having fun.

I was disappointed when Steven Page left the band at the sart of 2009 — his voice defined many of their songs, and I was sad that I wouldn’t hear him if and when I next saw the BNL live. (Martin’s rule of live performances is: always take the opportunity to see your favourite bands and artists live, because you never know when they’ll break up, or die.) This disappointment was reinforced when the band released a truly dreadful live recording of their first gig without Page in July of last year. Uh-oh, I thought. Guess that’s the end, then.

But no; their new album “All In Good Time” is pretty good. Not a BNL classic, but pretty good nevertheless. Ed Robertson sings most of the songs, but Jim Creeggan and Kevin Hearn both get more time on vocals (2 and 3 tracks respectively). And although I don’t particularly like Kevin Hearn’s voice in the abstract, somehow I do end up very fond of the tracks on which he takes the lead. (Watching The Northern Lights is sweet and delightful.) Go figure.

But still… a live performance? With the crowd clamouring for favourites like The Old Apartment and One Week that Steven Page used to properly belt out? My brother-in-law Mick mentioned to me a few months ago that the BNL happened to be playing a few gigs in California while we were going to be there. Despite my worries, it was too good an opportunity to pass by, especially because of the really cool-looking venues like the Mountain Winery. So tickets were bought.

Whoa, what a great evening.

First of all, the Mountain Winery is a lovely venue. You drive a winding road through the Saratoga hills to get there, and once you hit the car park you have a fabulous view out over Silicon Valley below. If you are willing to splash out the dough, you can have a gourmet dinner before the concert on one of the winery decks. And the stage itself is placed nestled in an intimate open-air amphitheatre at the heart of the estate, with vine-speckled slopes in the background. The seats have cup holders so you can enjoy a glass of the local wine with your music. It is very much a premium concert experience rather than a mere gig.

Another thing that made the evening great was that we took Fiona with us — this was her first concert! Fiona loves If I Had $1,000,000, and the BNL struck me as a good band to see as her introduction to live music. (“Daddy, will they be playing real instruments?”) She had a fantastic time, spending a good portion of the time dancing on her seat. Every few minutes she would tug on my arm and shine a massive grin at me. I love to see her so happy.

And the music itself? Wonderful. The band looked happy and relaxed on stage, and just as when I saw them before, they looked like they were genuinely having fun, doing something they love. Sure, the songs sound different without Steven Page’s vocals, but they have clearly adapted, and found new treatments for the old songs in his absence. But the band was in the groove, and the audience was thrilled. The atmosphere was fantastic. If, like me, you had any doubts about going to see them in the post-Page era, put them to rest. They’ve still got it.

Set list:

  1. Who Needs Sleep?
  2. The Old Apartment
  3. Falling For The First Time
  4. Every Subway Car
  5. Easy
  6. Maybe Katie
  7. Another Heartbreak
  8. Tonight Is The Night I Fell Asleep At The Wheel
  9. Sound Of Your Voice
  10. It’s All Been Done
  11. Pollywog In A Bog
  12. You Run Away
  13. Blame It On Me
  14. Four Seconds
  15. Big Bang Theory Theme
  16. One Week
  17. To Little Too Late
  18. Pinch Me
  19. If I Had $1000000


  1. Ordinary
  2. Watching The Northern Lights
  3. Light Up My Room

Finally, an amusing note about the set lists that I post to my gig reports. I don’t take notes during the show; instead I memorize the set list using scenes and pictures I compose as the songs are played. For example, the first three songs of this concert formed into an image of someone asleep in a bed (Who needs sleep?) in an apartment (The Old Apartment), with a burglar falling down as he climbs through an open window (Falling For The First Time). It’s a simple trick, but it only really works for bands whose songs and lyrics I know well.

Normally I hold the pictures in my head for a day or two, but unless I revisit them, they fade away quickly. The curious thing about this concert was that I found myself remembering the images I had composed for the BNL gig I attended back in 2001. For that one, the first picture was of someone showing up late for an date at a bar (Too Little Too Late), having a big drink (Alcohol), telling his life story to his date (Life, In a Nutshell), then falling off his bar stool (Falling For The First Time).

I hadn’t recalled that picture for nine years, and then all of a sudden it’s right there again. Funny how the mind works.