Separate stylesheets versus one big stylesheet:Which is best?

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

  1. Deryck

    Deryck Guest

    Hi,

    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?

    TIA

    Deryck
    Deryck, Oct 13, 2004
    #1
    1. Advertising

  2. Deryck

    brucie Guest

    In alt.html Deryck said:

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


    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.

    > Is this a good approach


    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.

    > and if so what's the best way to implement it? list the stylesheets in
    > the HTML or


    i use <link>s

    > list one "container" stylesheet in the
    > HTML which imports others?


    no way. KISS maybe if you're using bugs to hide some css but there are
    other easier ones than screwing around with imports.


    --


    v o i c e s
    brucie, Oct 13, 2004
    #2
    1. Advertising

  3. Deryck

    Noozer Guest

    "Deryck" <> wrote in message
    news:...
    > Hi,
    >
    > 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?


    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
    #3
  4. Deryck

    SpaceGirl Guest

    Noozer wrote:
    > "Deryck" <> wrote in message
    > news:...
    >
    >>Hi,
    >>
    >>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?

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


    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 @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 13, 2004
    #4
  5. Deryck

    brucie Guest

    In alt.html SpaceGirl said:

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


    what the hell are you putting in your CSS? with even my most complex its
    rare for them to be over 1k.

    --


    v o i c e s
    brucie, Oct 13, 2004
    #5
  6. Deryck

    SpaceGirl Guest

    brucie wrote:
    > In alt.html SpaceGirl said:
    >
    >
    >>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.

    >
    >
    > what the hell are you putting in your CSS? with even my most complex its
    > rare for them to be over 1k.
    >


    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 @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 13, 2004
    #6
  7. Deryck

    SpaceGirl Guest

    brucie wrote:
    > In alt.html SpaceGirl said:
    >
    >
    >>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.

    >
    >
    > what the hell are you putting in your CSS? with even my most complex its
    > rare for them to be over 1k.
    >


    Take a look at the BBC's basic CSS file:
    www.bbc.co.uk/home/styles/home_b5e7f4.css

    It's 2.3kb and does bugger all.

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 13, 2004
    #7
  8. 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.


    > Take a look at the BBC's basic CSS file:
    > www.bbc.co.uk/home/styles/home_b5e7f4.css


    aaahhhhhhhhaaaaaaaaaaaaaaaaa please warn me next time

    > It's 2.3kb and does bugger all.


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

    its only 2.5k because its poorly authored and don't forget poor
    implementation of the site design also increase the size.



    --


    v o i c e s
    brucie, Oct 13, 2004
    #8
  9. Deryck

    Deryck Guest

    "SpaceGirl" <> wrote in message
    news:...
    >
    > 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.
    >

    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.

    > As for different media, well this is a given really.


    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!)

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


    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
    sleep?

    Deryck
    Deryck, Oct 13, 2004
    #9
  10. Deryck

    SpaceGirl Guest

    brucie wrote:
    > 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.

    >
    >
    >>Take a look at the BBC's basic CSS file:
    >>www.bbc.co.uk/home/styles/home_b5e7f4.css

    >
    >
    > aaahhhhhhhhaaaaaaaaaaaaaaaaa please warn me next time
    >
    >
    >>It's 2.3kb and does bugger all.

    >
    >
    > 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
    > trying.
    >
    > its only 2.5k because its poorly authored and don't forget poor
    > implementation of the site design also increase the size.
    >
    >
    >


    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:

    http://digitalharmony.no-ip.com/subhuman10/css/screen.css

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


    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 13, 2004
    #10
  11. Deryck

    brucie Guest

    brucie, Oct 13, 2004
    #11
  12. Deryck

    Dylan Parry Guest

    Dylan Parry, Oct 13, 2004
    #12
  13. Deryck

    brucie Guest

    In alt.html Deryck said:

    > Brucie, do you ever sleep?


    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.

    --


    v o i c e s
    brucie, Oct 13, 2004
    #13
  14. Deryck

    brucie Guest

    brucie, Oct 13, 2004
    #14
  15. Deryck

    SpaceGirl Guest

    brucie wrote:
    > In alt.html Dylan Parry said:
    >
    >
    >>>http://digitalharmony.no-ip.com/subhuman10/css/screen.css
    >>>It's *really* bloated an unoptomised at the moment :(

    >
    >
    >>I assume you really meant
    >>http://digitalharmony.no-ip.com/subhuman10/css/ui.css ?

    >
    >
    > holy shit.
    >
    >


    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 @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Oct 13, 2004
    #15
  16. Deryck

    Karl Core Guest

    "SpaceGirl" <> wrote in message
    news:...
    > brucie wrote:
    >> In alt.html SpaceGirl said:
    >>
    >>
    >>>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.

    >>
    >>
    >> what the hell are you putting in your CSS? with even my most complex its
    >> rare for them to be over 1k.

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


    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
    Karl Core, Oct 13, 2004
    #16
  17. Deryck

    Toby Inkster Guest

    brucie wrote:

    > what the hell are you putting in your CSS? with even my most complex its
    > rare for them to be over 1k.


    [tai@ophelia tobyinkster.co.uk]$ 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 A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Oct 14, 2004
    #17
  18. Deryck

    brucie Guest

    In alt.html Toby Inkster said:

    >> what the hell are you putting in your CSS? with even my most complex its
    >> rare for them to be over 1k.


    > [tai@ophelia tobyinkster.co.uk]$ 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
    > [ etc etc ]


    my authoring style is much more compact.

    > -rw-r--r-- 1 tai 1688 May 22 18:00 styles/artistic/modern2/common.css


    this is closer but i'd go further.

    --


    v o i c e s
    brucie, Oct 14, 2004
    #18
  19. Deryck

    rf Guest

    SpaceGirl

    > >>http://digitalharmony.no-ip.com/subhuman10/css/ui.css ?


    Oh my.

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


    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.

    http://users.bigpond.net.au/rf/garbage.jpg

    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.

    --
    Cheers
    Richard.
    rf, Oct 14, 2004
    #19
  20. Deryck

    brucie Guest

    In alt.html rf said:

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


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


    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.

    really!

    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.

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


    true

    > http://users.bigpond.net.au/rf/garbage.jpg


    2 seconds. weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!

    > This page needs a major overhaul to fix all the problems,


    yes

    > These fixes would of course totally invalidate the current CSS file


    yes

    > which would probably need rewriting from the ground up,


    yes

    > but only *after* the content is sorted out.


    yes


    --


    v o i c e s
    brucie, Oct 14, 2004
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Shaguf
    Replies:
    0
    Views:
    345
    Shaguf
    Dec 24, 2008
  2. Shaguf
    Replies:
    0
    Views:
    443
    Shaguf
    Dec 26, 2008
  3. Shaguf
    Replies:
    0
    Views:
    229
    Shaguf
    Dec 26, 2008
  4. Paul Butcher
    Replies:
    12
    Views:
    704
    Gary Wright
    Nov 28, 2007
  5. Shaguf
    Replies:
    0
    Views:
    211
    Shaguf
    Dec 24, 2008
Loading...

Share This Page