CSS code structure: down the page or across?

[eclipse]

OK,
so my question is whether band-width is really significantly affected by white-space usage or not?

So, do people styling really big sites put their commands across the page to save white-space and returns, or do they put

each
command
down
the
page
the
way
Dreamweaver
styles it
for command
readability?

Is whitespace still an issue today, or was it only in the bandwidth challenged days of a few years back that this was an issue? Also, are there some countries (like bandwidth challenged Australia) where this is still an issue but not others? Or is readability just TOO important and worth sacrificing some $$$ in gigs of extra bandwidth on big sites?

[Melrose]

Bandwidth, in a case like that, is a bit overrated. I can understand a company like Google - with their millions of hits a day - worrying about it, but for you and me it's really a matter of preference.

I find the 'down the page' style very hard to read...


h3 {font:14px/18px "Times New Roman",Georgia,serif;color:#000;}


versus (^^well, with some shorthand..)


h3 {
font-size:14px;
line-height:18px;
font-family:"Times New Roman",Georgia,serif;
color:#000;
}


When you've got reams of CSS, I find it much easier to scan a line left-right than line-by-line top to bottom... I've taken recently to indenting the sub-classes or IDs underneath their containing element's style, which makes it even easier methinks. Like so:


#header {blah:blah;}
#header h3 {blah:blah;}
#header a {blah:blah;}


but that's just me :)

[eclipse]

So unless a super-sized site, just use the DW style or one lined style depending on personal preference hey? Cool.

[angelwatt]

Yea, the only ones really needing to save on bandwidth there are the ones getting tens of thousands of hits a day. Still though, you can cut down on around 20% of your file size by removing extra white space and removing comments in CSS and JavaScript files. They may be harder to read, but you don't work from those versions, those are simply the deployed versions. Also, with CSS files, as long as you use the same ones across the site, they'll get cached in the browser is properly setup so bandwidth gets saved that way.

[memco]

If you wanted, you can write it in one of the two previously mentioned fashions, and then run it through a compressor like CSS optimizer (http://www.cssoptimiser.com/) to scrunch it down into the "across the page" style. This will give you one easy to read copy for editing and a compressed version for production.

@Angelwatt: what about for longer declarations that wrap, do you still find it easier to read?

[angelwatt]

@Angelwatt: what about for longer declarations that wrap, do you still find it easier to read?

Not sure I follow. I prefer working from formatted code. Haven't happened across too many declarations that have to wrap.

[Ride9650]

gosh I learned something today!

I had no clue white space could affect bandwidth! Always wondered why I'd sometimes come across CSS written line by line.

[Melrose]

^^ It will save mere bytes to a page, but if you have to load that over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over and over.... you can see why it makes a difference.

CSS and HTML compressors are the Ritz, but save a copy of the original. I made the mistake a couple times of compressing the only copy I had of certain documents, and then they wanted an edit. Talk about painstaking tying to reformat it by hand...

[memco]

Not sure I follow. I prefer working from formatted code. Haven't happened across too many declarations that have to wrap.

All I mean is that if you do all your declarations in one line do you end up with something like this:
style(property:value;property:value;property:value;property:value;
property:value;property:value;)

or:
style(property:value;property:value;property:value;property:value;property:value;property:value;)

I tend to do soft wrap for code, because having things stretch off toward infinity on the right is a pain. When items are listed line by line, it helps you scan a declaration pretty quickly to find what you need to change. If for example, I need to change the font it's much easier to find it when I just have to search for the one line that begins with "font" rather than having to read the whole declaration.

I suppose I'll play with it some and see how it works.

[Aea]

Always strive for more readability. So go down the page with lots of comments, lots of tabs, and one property per line.

Then I run it through YUI and out pops a file more condensed then anything you could hope to manually code without losing your head. *


* I usually do something more complex for production sites, i.e. multiple files concatenated so I never have to look at a huge file.