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”
Hi Jordan :)
Absolutely correct about your second point — that is precisely the reason I find the second formatting method so appealing. And, to continue along that same line of reasoning, method-2 brackets increase uniformity throughout the document by lining up with the left-most characters specified in the declaration blocks. The funny thing is, I had not been able to elucidate my preference for this method until reading about it in your comment. Thanks! ;)
I totally agree about the third technique, although a potentially useful formatting method, something about it just looks broken. I am so familiar with seeing the opening brackets of CSS code placed on the same line as the selector, that it almost looks ridiculous to see them placed on the next line. But again, it is a sound technique that may prove beneficial in the future.
As for method four, again, all great points. Although I employ single-line code blocks every now and then (as punctuation, for similar blocks, etc.), I find it impossible to design even moderately sized websites using this technique. By the way, I would be very interested in knowing which CSS compressor/optimizer you use to strip out all of the unnecessary elements in your CSS documents..
The best compressor I’ve found that strip all the unnecessary spaces and co, is… your code editor. Just search and replace all “, ” with “,” for example, and so on.
You can also use YUI Compressor, it’s the best JS/CSS compressor out there in my opinion, and it has this really cool feature of letting you decide the max lenght of lines (one lined css file may have an impact on the CPU, and are a pain to edit.
It also does character encoding, which is great. UTF-8 FTW!
Yes of course! The humble code editor would indeed do the job (it may take a little longer, but hey, whatever!).. in fact, I use various text/code editors to do this sort of “find and replace” all the time, just never occurred to me to use this method to optimize an entire CSS file. In any case, thanks for the tips, especially for YUI compressor; I will definitely be checking it out (for both CSS and JavaScript).
UTF-8— WOOT!!I am a programmer as well and use formatting method #3 for a few reasons:
1) It makes it painfully obvious when you forgot an opening/closing bracket. I have spent too many hours debugging code only to find my “if” statement didn’t have a curly brace at the end (That was in C code not CSS).
2) I use vi, so the ]] and [[ character sequences will jump to the next and previous open curly brace (begin block) only if it is the first character of the line.
Finally I compress and gzip my CSS using some apache/PHP code I wrote. This code compresses without my having to modify how I write my CSS. You can download it for free at http://www.coolphptools.com/dynamic_css
Wow, looks like #3 is winning by a landslide, apparently due to its sheer practicality (not surprising, given our money-mad market-driven economy). As you say, placing brackets on their own line makes it virtually impossible to forget or misplace them, especially when using a facilitative editor such as vi to expedite the process (note to self: check out vi). Some great points, Kepler, thanks for chiming in, and thanks for sharing your dynamic CSS compressor. I have downloaded it and will definitely be giving it a spin! ;)
Robson’s CSS compressor gives me the best results. I’ve tested a few, and this one is simply merciless at squeezing out every unnecessary character. (It supports
UTF-8, too.)Thanks for the followup, Jordan. I have bookmarked Robson’s CSS Compressor and will definitely be taking it for a spin! Cheers ;)
method #2 + indents for internal elements of the parent blocks
div#example_01 {padding: 3px;}div#example_01 p{margin: 33px;}div#example_01 p span{width: 333px;}div#example_01 div{padding: 3px;margin: 33px;width: 333px;}div#example_02 {padding: 3px;margin: 33px;width: 333px;}Excellent timing, rmaksim! I just posted a follow-up article covering CSS indentation and spacing. Check it out!
I actually use a combination of #3 and #4. I use #3 if I have more than one class or ID that share the same styles or if a class/ID has more than 2 or three styles.
I use #4 if I have a group of similar classes/ID that belong to a group. For example if I have a sprite consisting of 4 images, I place them together in a group in the #4 method.
Absolutely! Grouping single-line code blocks (as in method #4) is an ideal way to consolidate otherwise expansive regions of CSS code, especially where nearly identical declaration blocks are concerned. A great way to keep things clean and organized. Thanks for sharing!
I changed my coding habits recently, and I guess here is the place to speak about it.
I switched from this to the one-lined declarations. I realised that I was actually spending more time locating the selectors than writing code. This is bad, so I tried the one-lined syntax and found it really confortable.