A while ago there was a post by Steve Smith of Ordered List about how he formats his CSS on a single line per selector, brackets and attributes. I call this inline CSS. For the longest time I strictly adhered to a formatting quite the opposite, which I call block CSS. An example of both is shown in Figures 1 and 2.
- #example-div { width:400px; margin:0; padding:0; float:left; border:1px solid #999; background-color:#ddd; }
- #example-div
- {
- width:400px;
- margin:0;
- padding:0;
- float:left;
- border:1px solid #999;
- background-color:#ddd;
- }
I’m in the camp that would rather have a file with hundreds of lines than have to look through all of the attributes as they’re formatted in Figure 1. However, there are some cases when block CSS seems a little overkill, such as Figure 3.
- #example-div a
- {
- text-decoration:none;
- }
I began to wonder if maybe I was being too strict with the block-only approach. Surely, it seemed, that the inline approach was more beneficial in some cases. Each had their benefits and liabilities, maybe I could combine the two for one harmonious style sheet?
At some point, I’m not exactly sure when, I did begin to mix the two and my CSS began to look more like what’s shown in Figure 4.
- #example-div
- {
- width:400px;
- margin:0;
- padding:0;
- float:left;
- border:1px solid #999;
- background-color:#ddd;
- }
- #example-div a { text-decoration:none; }
Now as far as what determines whether the selector gets the block format or the inline format varies; there’s no exact criteria, at least not yet. Generally, selectors with few properties will be written inline and those with more styling will get the block. I found that formatting CSS this way lends itself to an easy-to-follow rhythm as the style sheet grows (Figure 5).
- #example-div
- {
- width:400px;
- margin:0;
- padding:0;
- float:left;
- border:1px solid #999;
- background-color:#ddd;
- }
- #example-div a { text-decoration:none; }
- #example-div a:hover { background-color:#0f0; }
- ul#main-nav { list-style:none; border-top:1px solid #ddd; }
- ul#main-nav li { border-bottom:1px solid #ddd; }
- ul#main-nav a
- {
- width:150px;
- display:block;
- font-family:Georgia, “Times New Roman”, serif;
- font-size:14px;
- color:#333;
- background-color:#eee;
- }
- ul#main-nav a:hover { color:#f00; background-color:#fff; }
Next up: <br /> vs. <br/>! (Just kidding)
Commentary
“Inline CSS” is a very confusing name to use here, since you’re overloading the traditional meaning of CSS inside HTML in style attributes. Block vs. inline has a completely different meaning and I don’t think it really helps to confuse this.
Bruce, you make a good point. Perhaps single line and multi-line would be better terms.
I find myself doing this type of formatting myself very often.
For “simple” declarations, I just the single-line method. For example, all my header tags are just single-lines all right in a row. Then for more “complicated” chunks, I go back to the multi-line format.
A tweener way of doing this is to put related attributes up on the same line. For example, put margin and padding always on the same line, color and background-color on the same line, but break lines between those.
I prefer what you are calling inline CSS formating for my stylesheets. I prefer seeing more of the code in one page rather having to scroll. In addition it can make the file size a little bit smaller. However, I see the benifits of the block style, especially in debugging work.
I too have found my self writing CSS just as you do. Great read!
I think that referring to them as single-line and multi-line is much more appropriate as when I first came to this post I was expecting an article about something completely different.
I too used a mixed format as I find that it keeps it clean, while allowing me to quickly locate the exact style that I wish to edit.
Good post.
Interesting post. But your terms of “inline” and “block” with respect to CSS is very much mis-leading. I hate to harp on verbal semantics — but inline CSS has a very distinctive meaning already.
Regardless –> I follow Steve’s method of keeping all on one line. Keeps things clean and organized (for the author at least).
Single line if only one statement and multi-line for multiple statements, in development, so it is clearer to read and maintain.
Just before I implement the stylesheet I run it through a compressor, which usually converts each style to single line, so that it requires less bandwidth for the client to download.
Remember to keep the multiline version in your version control system for maintenance, otherwise you’ll have a headache trying to uncompress the file!
What you describes is exactly how I’ve formatted my style sheets for years (except that I don’t but the bracket on its own line). I’d be interesting to hear about your take on comments in the CSS with this formatting though, cause that tend to change quite a lot for me.
Teddy: I usually only put comments at the very beginning of the style sheet (such as the required WordPress theme parameters) and at logical section breaks.
My format is seven dashes then the section name in all caps and then seven more dashes.
Ex.
/* ------- NAVIGATION ------- */Also I try to have two line breaks before the section marker and one after it.
Other than those section identifiers commenting is rare, if present at all. I use semantic classes and IDs so that intense commenting is not necessary for my use.
At times when I do make a comment for a certain attribute I usually put it at the end.
Ex.
ul#main-nav { list-style:none; } /* strips list styles */Others: Thanks for commenting, I’ve enjoyed reading everyone’s methods, etc.
And yes, I should have used different names for describing single line and multi-line, my apologies to those who came here expecting a different post.
I guess I’ll have to change my upcoming article about how much whitespace you should use in your designs: marginal or padded ;)
Another vote for single/multi line. I’m also glad to say that I make use of both styles just like your examples =).
When I first started learning CSS everything was multi-line. Since then I have done single line CSS for everything. I think it is much better organized and easier to find what you are looking for.
When I’m working with multi-line CSS I find myself scrolling and looking for selectors too frequently. It seems to be more work that way.
I’m sure it is all in the way you train your eye though, neither is necessarily right or wrong.
I made a complete switch to “block” to “inline” (there really is a better name for these things I’m sure) about a year ago and I love it. I indent/nest everything so “.class h1″ would be indented below “.class” it doesn’t work logically 100% but it makes it easy to find what i was quickly.
Anyone who has done real programming will tell you mixing styles is unprofessional, and poor form. You should never do anything that make reading more difficult. Switching styles does that. All protestations to the contrary not withstanding; it’s a bad idea.
Pick one style and stick with it. If you work in a company everyone should code the same way.
Consistency is important.
Hmmmmmm…. There is a lot of ways that you can go with this.
Firstly inline CSS is like this
This is an ugly looking box
It looks like this issue is mainly just a concern of BANDWIDTH and if thats the case, just make everything on one line and don’t use spaces at all.
I don’t really factor that even on very high traffic sites because CSS files are cached. To me it doesn’t matter if we spend $200 more dollars a month on bandwidth if our development team can READ and easily analyze CSS files. That in turn will save us $1000 on man time.
You know what I mean?
I find myself using the method you described also.
For CSS styling that has more than a couple of lines I use the block approach saves you time when you need to fix something for IE ;).
The inline method where only a single attribute is being changed makes your CSS code look far neater. I’m a nazi when it comes to CSS and XHTML.
I care about how people will see my code. You’ve always got to make an impression and neatness is one of them.
- Dwayne Charrington.
http://www.dwaynecharrington.com
I’m in the camp that prefers single-line CSS and left my thoughts previously on Ordered List. Writing CSS by hand (and waxing OCD) I always write attributes in the same order. It greatly improves the scanning ease of the rule because you know generally where to look for a declaration. Also using wide format screens gives me a much more efficient screen usage.
Inline (Single Line) all the way, multi line is easier to read but takes ages to locate different classes etc.
If you use Firebug locating particular attributes is a breeze and then you can jump to your style sheet and amend accordingly or do it directly.
And if you insist on using the multi line method you can always use a tool to compress your CSS for use only in a live environment which will reduce the file size; to be honest this could/should be done for all style sheets, the difference in file sizes can be big!!
As someone who is new to CSS, I usually do what was demonstrated in figure 5 when creating style sheets.