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 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.

 

[kødskjold]

Minification is somewhat popular. I haven't used it, but I know Gulp has a minifier plugin. Automatically nuke whitespace/comments/etc for deployment to prod.

Edit: I just realized this post is ancient. I love being a necromancer of old threads.

 

[960design]

I develop using a single 'styles.css' sheet for common settings and a single 'login.css','about-you.css','contact-us.css' style sheet for each 'page'. For production I minify and cache manifest them all into a single file. So it really doesn't matter if you write across or down. For me, I write down the page. My CSS files are presented in the order that the appear in the document, so body stuff at the top, first div stuff, inside first div stuff, second div stuff...

Dang... fell for 'Back from the dead'

 

[BMJT]

http://cssguidelin.es/

Don't worry about whitespace, gzipping will take care of it.

 

[The Clark]

I'm not a savage so I'm definitely focused writing down the page as it's just easier for me to navigate.

 

[Strider64]

One can always use a CSS preprocessor (Sass, LESS and Stylus, 4:01). I personally use Sass and I don't compact the CSS in the final output though I could with ease. If I were building large sites I might. Even though I write my CSS down I do use shortcuts when writing in CSS for that is one of the benefits of using Sass.

 

[sugardrum]

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?

[doublepost=1453001147][/doublepost]I put the styles on one line but in alphabetical order as I find that makes it much easier to see what styles I've used. Then I run it through a minifier to get rid of the white space and commenting.

Nigel

 

[dauber]

My coworkers and I use a combination. If it's just one property for a style (sometimes maybe two if the properties are closely related), just a single line. In the end, it doesn't matter as our CSS files get minified before deployment.

Multiple properties => multiple lines. It's just freakin' impossible to find what you're looking for if you have a ton of properties going across the screen. Yeah, that's what ctrl/F is for, but it's difficult to read when there's text all around it!