CSS code structure: down the page or across?

Discussion in 'Web Design and Development' started by eclipse, Feb 12, 2009.

  1. eclipse macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #1
    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?
     
  2. Melrose Suspended

    Melrose

    Joined:
    Dec 12, 2007
    #2
    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...

    Code:
    h3 {font:14px/18px "Times New Roman",Georgia,serif;color:#000;}
    
    versus (^^well, with some shorthand..)

    Code:
    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:

    Code:
    #header {blah:blah;}
       #header h3 {blah:blah;}
       #header a {blah:blah;}
    
    but that's just me :)
     
  3. eclipse thread starter macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #3
    So unless a super-sized site, just use the DW style or one lined style depending on personal preference hey? Cool.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. memco macrumors 6502

    Joined:
    May 1, 2008
    #5
    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?
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Not sure I follow. I prefer working from formatted code. Haven't happened across too many declarations that have to wrap.
     
  7. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #7
    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.
     
  8. Melrose Suspended

    Melrose

    Joined:
    Dec 12, 2007
    #8
    ^^ 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...
     
  9. memco macrumors 6502

    Joined:
    May 1, 2008
    #9
    All I mean is that if you do all your declarations in one line do you end up with something like this:
    Code:
    style(property:value;property:value;property:value;property:value;
    property:value;property:value;)
    or:
    Code:
    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.
     
  10. Aea macrumors 6502a

    Aea

    Joined:
    May 23, 2007
    Location:
    Denver, Colorado
    #10
    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.
     
  11. kødskjold macrumors member

    Joined:
    Oct 21, 2015
    #11
    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.
     
  12. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #12
    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'
     
  13. BMJT macrumors regular

    Joined:
    Jun 6, 2009
    Location:
    Bristol, UK
    #13
  14. The Clark macrumors regular

    The Clark

    Joined:
    Dec 11, 2013
    Location:
    Victoria, BC
    #14
    I'm not a savage so I'm definitely focused writing down the page as it's just easier for me to navigate.
     
  15. Strider64 macrumors regular

    Strider64

    Joined:
    Dec 1, 2015
    Location:
    Suburb of Detroit
    #15
    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.
     
  16. sugardrum macrumors newbie

    Joined:
    Apr 20, 2010
    #16
    --- Post Merged, Jan 16, 2016 ---
    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
     
  17. dauber macrumors regular

    dauber

    Joined:
    Jan 10, 2012
    Location:
    Chicago
    #17
    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!
     

Share This Page