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!
39 responses to “Obsessive CSS Code Formatting: Opening and Closing Brackets”
@Mark #31
Cannot believe this format (basically Whitesmith) was not mentioned earlier. This is easily the best bracing format that exists – for virtually all curly-brace languages, including C, C++, Java, PHP, etc.
Think about it from a usability/readability stance – of course matched braces need to align with each other. But they do NOT need to be floating out in the left margins, hogging up your attention that should be focused on the actual control structure and content!
Beyond that, it’s a much better match for the actual grammer of these languages. The braces are part of the statement inside the control, NOT part of the control ! i.e. the definition of an if statement is:
if ( condition )
statement;
it’s NOT
if ( condition )
{ statements };
The grammer of a statement block is: ::= { ? }
For more details, see any BNF description, such as: http://www.daimi.au.dk/dRegAut/JavaBNF.html
In the first case, virtually everyone would agree that the inner statement MUST be indented.
The inner statement can be a single statement, or one or more statements surrounded by { }. And in either case, the statement or statement block should be consistently indented from the “if” itself. This leads to more readable code as well as being more “properly” structured, from a language point of view.
If you think it’s odd, just try it. I guarantee that unless you’ve closed your mind to advancement you will find that it’s by far the easiest formatting to work with — once you’ve flushed the other garbage out of your head. Granted, this can be hard to do if you’re in a shop with poor code formatting standards, but you can try.
I use single line and grouping, plus i usually keep core block neat at top and inner content blocks near bottom, not always tho.
Also group then by type
/* Core Blocks */div.wrap {width:100%; margin:0px auto;}div.head {width:100%; height:50px;}div.body {width:100%;}input {color:#333;}input.wide {width:250px;}/* Inner Blocks (Tied directly to parent)*/div.head div.left {float:left;}div.head div.left p {padding:5px;}div.head div.left div {text-size:1.2em;}div.head div.right {float:right;}/* Misc Block */div.clear {clear:both;}div.cbl {width:50%; padding:10px;}I use method three, and use method four when a selector only requires one property.