Feb 28 2012

Single Line CSS

I’ve been going against convention when creating my CSS files for over two years now. I put my selector, brackets, and attribute/value pairs all on a single line in my CSS file. And I love it. Let me show you why.

To give credit where it’s due, this technique was originally show to me by John Nunemaker. And when I first saw it, I likely responded the same way you will shortly. “Um. No thanks, that’s ugly.” But the more I saw it, the more I saw it’s usefulness, and soon enough I was writing my CSS files the same way.

Enough preface, let’s see some code

Typically, when you see css code, you see it like this:

#wrapper {
    width:800px;
    margin:0 auto;
}

#header {
    height:100px;
    position:relative;
}

#feature .post {
    width:490px;
    float:left;
}

#feature .link {
    width:195px;
    display:inline;
    margin:0 10px 0 0;
    float:right;
}

#footer {
    clear:both;
    font-size:93%;
    float:none;
}

All well and good. You can easily scan down this list, find your selector, then scan down a short list of attributes to get to the values your looking for. But imagine now that you have over 200 selectors, each with a laundry-list of attributes. That’s quite a mess to search through. My issue with CSS files like these is when they get large, it becomes very difficult to scan the document for a particular selector. They’re all separated by loads of attribute and value pairs. So what if we took out that separation, and put each selector, and it’s attributes and values all on the same line?

#wrapper            {width:800px; margin:0 auto;}
#header             {height:100px; position:relative;}
#feature .post      {width:490px; float:left;}
#feature .link      {width:195px; display:inline; margin:0 10px 0 0; float:right;}
#footer             {clear:both; font-size:93%; float:none;}

Now that is easy to scan through. To put this into a practical example, one of my single-line stylesheets comes in around 307 lines. Converting the same stylesheet to the normal CSS formatting grows that to a whopping 1167 lines! 6-8 screens of CSS vs 22-25. That’s quite a difference.

“But Steve,” I can hear you say, “now the attributes are hard to scan through.” True, it’s not as easy as it was when they’re lined up like the previous example. But think of it this way: a large CSS file might have hundreds of selectors, but each of those selectors may have only a few attribute and value pairs, or maybe as much as 10 to 12 if it’s very stylized.

So, which would you rather spend your time searching through? A list of hundreds of disjointed selectors to find just the right one you’re looking for, or easily scan 200+ selectors, and then spend an extra second or so looking through the few attribute and value pairs defined within?

I would at least encourage you to give it a try. This is just a little tip that saves me loads of time when creating, and especially editing, CSS, so I thought I’d share.