The Particle Lab

Single-Line vs Multi-Line CSS, plus TextMate tips

By Ben, 23 Mar 2010

Now that the stormy debate around whether or not designers should be able to code what they produce has died down, the new debate du jour is here! Or rather, it's back again. This one has been around before, and it's about whether laying out your CSS code on single lines (one selector per line), or multiple lines is better.

In the red corner; single-line CSS code formatting:

header h1 { float: left; width: 155px; height: 50px; }
header h1 a { display: block; opacity: 0.8; border-bottom-width: 0; }

In the blue corner; multiple-line CSS code formatting:

header h1 {
	float: left;
	width: 155px;
	height: 50px;
}

header h1 a {
	display: block;
	opacity: 0.8;
	border-bottom-width: 0;
}

The principal argument for coding on single lines is that you end up with a file that has all your selectors stacked up on top of each other, allowing for easier eye scanning when hunting for a specific selector.

The most common argument against is that when you're working in a source controlled environment (which of course we all are because we'd be idiots not to, right?) and a change is made to the CSS, there's no way with the single-line approach to quickly see which property was changed and how. Here's a modification to some multi-line CSS code:

And here's how the same modification would look if this was a single line statement:

It's obvious from the multiple-line example that the background-color property has been changed from transparent to "#fff", but in the single-line example the actual change isn't highlighted because differentiators only work on a per-line basis, so it just reports that the whole line has changed. It will be up to you to work out which property was modified. Now talk to me about "easier to scan".

For the most part, and complexities during source control diffs aside, this is simply a case of personal preference. Opinion is divided right down the middle as to which is better, with no fence sitters because really you just have to pick your preferred option (as a team if there's more than one CSS coder involved on a project) and stick to it for consistency. Saying that it's best practise to use one technique or the other isn't really helpful — just figure out what works for your situation and environment and stick with that.

My preference is for multiple-line CSS, because that's how I've always done it, I use source control on every single project (even solo projects), and my process for designing and front-end coding involves inspecting elements in Firebug, testing modifications to markup and style, then using Find ⌘F to jump immediately to the relevant selector I want to change. This involves no visual scanning for selectors in my code editor, and once you have the required keystrokes wired into your brain I guarantee that this is far quicker than scro

But enough of this petty bickering debate! Because I'm lucky enough to be a TextMate user, this is all completely academic. Here are two quick TextMate tips for multiple-line CSS coding to help with finding selectors, if you want the best of both worlds.

When editing a CSS file, you'll have a "Symbol Navigator" in right side of the status bar, which displays the currently focused selector based on cursor position. If you click the Symbol Navigator, a menu appears which displays all your selectors in a very easily scannable list. Simply click on one to jump straight to it.

You can also use the shortcut ⌘⇧T to pull up a "Go To Symbol" dialog, where you can type part of your selector and it will suggest matches. Use the arrow keys to move up and down the matches, and the Enter key to jump to that selector in your file. Hat tip to Doug Neiner for that one.

TextMate screenshot showing Symbol Navigation

There's also a quick way to jump between what is effectively a selector only view and your standard multiple-line format, by making use of Code Folding. While editing normally and laying out code using the multiple-line technique, your code will look something like this:

But if you use Code Folding to collapse your code on all levels (and with vanilla CSS there will only be one level anyway) using the shortcut ⌘⌥0 then you'll reduce your display of your code to this:

This view will help you scan selectors quickly without the attributes getting in the way. When you've found the selector you want, pushing ⌘⌥0 again will return you to the unfolded view.

Notice by the line numbers that I'm not afraid of large CSS files, and why should anyone care about that? It's 2010 and we have smarter text editors these days than the days where a 2000 line file was a big deal because of all the scrolling we had to do. CSS should be minified as part of your deployment process to your production environment anyway, so this is a non-issue for your end users who are served the file.

So, go forth and code in whatever style you prefer. Hopefully this shows you that if you have the appropriate tools for the job, smaller details like code formatting start to matter a lot less which allows us to spend our energies on coding more and better things, instead of arguing about how we code.

Update: Sean Gaffney commented to tell us about another TextMate shortcut: ^⌥Q which properly converts multiple-line CSS to single-line. Thanks, Sean!

Update 2: Another killer TextMate tip, this one from Doug Neiner - Hitting ⌘⇧T while editing a CSS file will bring up a "Go To Symbol" dialog with a list of all your selectors, which is much cleaner than my method for searching using Find. This "easier to scan selectors" argument for single-line CSS is really shot to pieces if you're a TM user now. Thanks Doug!

Photo of Ben Bodien, who wrote this blog post

Ben Bodien is Principal & Co-Founder at Neutron Creations, where he oversees product design and front-end development. For a somewhat balanced mixture of ranting and raving follow Ben Bodien on twitter.

comments powered by Disqus