Obsessive CSS Code Formatting: Opening and Closing Brackets

Following my recent post on CSS code formatting, I was delightfully surprised to have received such insightful, enthusiastic feedback. Apparently, I am not the only person passionate about the subtle nuances involved with the formatting of CSS code. So, to continue the conversation, let’s explore several techniques for writing the opening and closing brackets of CSS declaration blocks.

Formatting method #1

I have seen this method used more than any other. The opening bracket appears on the same line as the selector and the closing bracket appears on its own line after the final property:

div#example_01 {
	padding: 3px;
	margin: 33px;
	width: 333px;
}
div#example_02 {
	padding: 3px;
	margin: 33px;
	width: 333px;
}
div#example_03 {
	padding: 3px;
	margin: 33px;
	width: 333px;
}

Standard stuff, maybe even a bit boring..? I don’t know. I tend to use this formatting method by default, although my technique is rapidly evolving to include a more sophisticated approach..

Formatting method #2

Recently I have been dabbling with this sexy little method. I love the way the closing bracket aligns neatly with the preceding declaration block:

div#example_01 {
	padding: 3px;
	margin: 33px;
	width: 333px;
	}
div#example_02 {
	padding: 3px;
	margin: 33px;
	width: 333px;
	}
div#example_03 {
	padding: 3px;
	margin: 33px;
	width: 333px;
	}

Of course, the major advantage to this technique is the improved readability of the various selectors. With no closing brackets cluttering things up, Locating target code is about as easy as it gets..

Formatting method #3

Although I have never used this method, I can certainly understand why people continue to use it. Every now and then, I will encounter a snippet of CSS that places the opening bracket on the line immediately beneath the selector:

div#example_01 
{
	padding: 3px;
	margin: 33px;
	width: 333px;
}
div#example_02 
{
	padding: 3px;
	margin: 33px;
	width: 333px;
}
div#example_03 
{
	padding: 3px;
	margin: 33px;
	width: 333px;
}

I think the idea here is to facilitate the readability of the code, however there is something that just seems out of place with that opening bracket. On a positive note, the uniformity of the bracket placement increases overall consistency and brings additional order to the document.

Formatting method #4

Last and quite possibly least, is the infamous “single-line” technique! For the more practical-minded folk out there, this method easily trumps the others with its sheer efficiency:

div#example_01 { padding: 3px; margin: 33px; width: 333px; }
div#example_02 { padding: 3px; margin: 33px; width: 333px; }
div#example_03 { padding: 3px; margin: 33px; width: 333px; }

Sure, this method looks great here, with the deliberately identical example declarations, but out in the wild, stylesheets employing the ‘ol single-line approach appear convoluted, complicated, and crowded. Yet, to those looking to squeeze that extra 5Kb out of their total bandwidth, the benefits of this technique are clear.

Share your thoughts

What is your preferred method for writing CSS brackets? Do you use one of the above methods, or something else? Share your thoughts!