Separate stylesheets versus one big stylesheet:Which is best?

Discussion in 'HTML' started by Deryck, Oct 13, 2004.

  1. Deryck

    Deryck Guest


    As per the header I'm trying to decide whether big stylesheets should be
    decomposed into smaller, possibly easier to manage, sheets.

    Is this a good approach and if so what's the best way to implement it? Eg
    list the stylesheets in the HTML or list one "container" stylesheet in the
    HTML which imports others?


    Deryck, Oct 13, 2004
    1. Advertisements

  2. Deryck

    brucie Guest

    In alt.html Deryck said:
    thats how i do it. colors for one, links/menu in another and basic
    styles the other. depending on site maybe a few more but they're the
    basic three.
    i believe so, its much easier to manage. for example changing colors for
    the entire site is just editing one file that /only has/ color
    properties in it. much easier than hunting around looking for them.
    no way. KISS maybe if you're using bugs to hide some css but there are
    other easier ones than screwing around with imports.
    brucie, Oct 13, 2004
    1. Advertisements

  3. Deryck

    Noozer Guest

    Personally I think one big sheet is easier to maintain. Just comment it to
    make it easier to understand.

    If you are coding sheets for different media, you may want to break that
    into separate files.
    Noozer, Oct 13, 2004
  4. Deryck

    SpaceGirl Guest

    You also have the whole IP overhead thing to think about. Say a user is
    on a slow connection. It might take them 5 seconds to download 5kb. Add
    to that 10% overhead for HTTP headers and IP stuff. Then add the amount
    of time it takes for the browser to request the file and for it to get
    it. The more files you have, the slower it gets, and the greater chance
    some poor soul on a slow connection will have one of your essential CSS
    documents timeout.

    As for different media, well this is a given really. We tend you use 3
    sheets; 'screen.css', 'print.css', and 'simple.css'. Only the first two
    are actually linked to documents. If an older browser requests one of
    our pages, 'screen.css' is swapped for 'simple.css' at the server so
    that complex styles aren't sent to older incompatible browsers.


    x theSpaceGirl (miranda)

    # lead designer @ #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 13, 2004
  5. Deryck

    brucie Guest

    In alt.html SpaceGirl said:
    what the hell are you putting in your CSS? with even my most complex its
    rare for them to be over 1k.
    brucie, Oct 13, 2004
  6. Deryck

    SpaceGirl Guest

    If you build a complex site and use 100% CSS, it soon bloats. Our
    application site has an 11kb CSS file. My pet "garbage" site has a 4kb one.


    x theSpaceGirl (miranda)

    # lead designer @ #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 13, 2004
  7. Deryck

    SpaceGirl Guest

    Take a look at the BBC's basic CSS file:

    It's 2.3kb and does bugger all.


    x theSpaceGirl (miranda)

    # lead designer @ #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 13, 2004
  8. Deryck

    brucie Guest

    In alt.html SpaceGirl said:
    aaahhhhhhhhaaaaaaaaaaaaaaaaa please warn me next time
    look how many times they're repeated themselves. for example
    color:#ffffff really stands out. you could group them all. redundant
    fonts, weights, margins etc. you could dump 500 bytes off it without

    its only 2.5k because its poorly authored and don't forget poor
    implementation of the site design also increase the size.
    brucie, Oct 13, 2004
  9. Deryck

    Deryck Guest

    I accept your comments about reducing file numbers being a good thang (and
    the implied philosophy of designing sites so that slow connection users can
    still access them)
    completely. Its the main reason that I use CSS: remove unnecessary gifs,
    tables, etc.

    The only comment that I'd make is that if they struggle to get a 5kb css
    file then they'll probably struggle to download all of the images on a page
    too (there will almost certainly be some), so
    will need to refresh at some point to catch the missing files.
    Yes. Even a relative newbie like moi keeps a separate print.css file (and
    what a revelation it was when I learnt how to do that!)
    Nice idea. I'll be sure to rip tha- I mean "incorporate" that idea too. :)

    Thanks also to Brucie and Noozer for your views. BTW, Brucie, do you ever

    Deryck, Oct 13, 2004
  10. Deryck

    SpaceGirl Guest

    Easier to understand, easier to apply a change without running the risk
    of effecting unexpected elements of your design. CSS is great, but it is
    also very easy to break big chunks of your site.

    Take a look at the one for my site:

    It's *really* bloated an unoptomised at the moment :(


    x theSpaceGirl (miranda)

    # lead designer @ #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 13, 2004
  11. Deryck

    brucie Guest

    brucie, Oct 13, 2004
  12. Deryck

    Dylan Parry Guest

    Dylan Parry, Oct 13, 2004
  13. Deryck

    brucie Guest

    In alt.html Deryck said:
    my species has evolved beyond the need for it and i can assure you the
    amphetamine lab in the shed has absolutely nothing to do with it.
    brucie, Oct 13, 2004
  14. Deryck

    brucie Guest

    brucie, Oct 13, 2004
  15. Deryck

    SpaceGirl Guest

    It is actually fairly efficient if you step through it, but I've not
    tried. There's only one chunk of IE specific stuff in there (scrollbars)
    which I may dump anyway.

    I'd be interested if an expert could crush it down to something smaller
    though :D


    x theSpaceGirl (miranda)

    # lead designer @ #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 13, 2004
  16. Deryck

    Karl Core Guest

    I have one that is 14kb, but none of my other style sheets are over 6kb, and
    almost all of my sites are 100% CSS for presentation.

    Karl Core, Oct 13, 2004
  17. Deryck

    Toby Inkster Guest

    [tai@ophelia]$ find styles/ | grep 'css$' | grep -v OLD | xargs ls -lG
    -rw-r--r-- 1 tai 1373 Oct 7 07:35 styles/artistic/1996.css
    -rw-r--r-- 1 tai 1683 Oct 7 07:36 styles/artistic/flower2.css
    -rw-r--r-- 1 tai 1686 Oct 7 07:36 styles/artistic/flower.css
    -rw-r--r-- 1 tai 1688 May 22 18:00 styles/artistic/modern2/common.css
    -rw-r--r-- 1 tai 2167 Oct 7 07:33 styles/artistic/modern2.css
    -rw-r--r-- 1 tai 1221 Oct 7 07:36 styles/artistic/saturn.css
    -rw-r--r-- 1 tai 798 Oct 7 07:36 styles/artistic/wheat.css
    -rw-r--r-- 1 tai 361 Sep 9 12:39 styles/colours/amber_on_black.css
    -rw-r--r-- 1 tai 458 Sep 9 12:39 styles/colours/aquatic.css
    -rw-r--r-- 1 tai 531 Sep 9 12:38 styles/colours/black_on_grey.css
    -rw-r--r-- 1 tai 531 Sep 9 12:38 styles/colours/black_on_offwhite.css
    -rw-r--r-- 1 tai 533 Sep 9 12:38 styles/colours/black_on_white.css
    -rw-r--r-- 1 tai 364 Sep 9 12:38 styles/colours/green_on_black.css
    -rw-r--r-- 1 tai 33 Mar 17 2004 styles/colours/off.css
    -rw-r--r-- 1 tai 576 Aug 22 18:06 styles/fonts/mixed.css
    -rw-r--r-- 1 tai 0 Mar 8 2004 styles/fonts/off.css
    -rw-r--r-- 1 tai 407 Aug 15 17:12 styles/fonts/sans.css
    -rw-r--r-- 1 tai 403 Aug 15 17:12 styles/fonts/serif.css
    -rw-r--r-- 1 tai 0 Mar 8 2004 styles/layouts/off.css
    -rw-r--r-- 1 tai 639 Oct 10 10:49 styles/layouts/one_column.css
    -rw-r--r-- 1 tai 2427 Oct 13 23:59 styles/layouts/two_columns.css
    -rw-r--r-- 1 tai 482 Aug 26 07:34 styles/multimedia.css

    Fourth column is file sizes.
    Toby Inkster, Oct 14, 2004
  18. Deryck

    brucie Guest

    In alt.html Toby Inkster said:
    my authoring style is much more compact.
    this is closer but i'd go further.
    brucie, Oct 14, 2004
  19. Deryck

    rf Guest


    Oh my.
    Since nobody else took up the gauntlet and as I do have a spare 10 minutes
    right now I decided to have a go.

    Until I looked at the HTML.

    Sorry miranda but there is no point in playing with a CSS file that is
    styling a broken HTML file.

    Yep, unfortunately, broken.

    Scroll down and note the position of the horizontal scroll bar.

    This page needs a major overhaul to fix all the problems, the incorrectly
    centred content, the text escaping out of the absolutely positioned divs
    and, IHMO, the bloody annoying scrolling divs :)

    The font size in pixels should also be removed for the benifit of IE users.

    These fixes would of course totally invalidate the current CSS file which
    would probably need rewriting from the ground up, but only *after* the
    content is sorted out.
    rf, Oct 14, 2004
  20. Deryck

    brucie Guest

    In alt.html rf said:
    my excuses:

    1. when the request came in it was too late at night.
    2. payday so it was shopping for food 'n shit day.
    3. burst irrigation pipe.

    busy day, i only had time to quickly pop in to see what was happening
    and run off again.


    very busy tomorrow:

    things to get:

    900 meters 3.5mm fencing wire.
    100 meters 115mm dog fence.
    2 bundles of star pickets (20).
    100 meters 1 1/4 inch poly pipe.
    200 meters 1 inch poly pipe.
    various poly connectors.
    1 bag dog bones.
    300 litters petrol.
    2 45kg bottles gas.

    then i have to do stuff with all the shit purchased or at least think
    about doing shit with all the stuff purchased.
    2 seconds. weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!
    brucie, Oct 14, 2004
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.