Separate stylesheets versus one big stylesheet:Which is best?

[Deryck]

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

 

[brucie]

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

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.

 

[Noozer]

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.

 

[SpaceGirl]

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 #

 

[brucie]

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.

 

[SpaceGirl]

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.

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]

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

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 #

 

[brucie]

In alt.html SpaceGirl said:

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.

 

[Deryck]

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

 

[SpaceGirl]

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

 

[brucie]

In alt.html SpaceGirl said:

http://digitalharmony.no-ip.com/subhuman10/css/screen.css
It's *really* bloated an unoptomised at the moment

its really 404 at the moment

 

[Dylan Parry]

As an authority on the subject, SpaceGirl proclaimed:

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

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

Yep, that's truly yucky looking CSS

 

[brucie]

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.

 

[brucie]

In alt.html Dylan Parry said:

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

holy shit.

 

[SpaceGirl]

In alt.html Dylan Parry said:




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

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[Karl Core]

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

 

[Toby Inkster]

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.

 

[brucie]

In alt.html Toby Inkster said:

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

 

[rf]

SpaceGirl

Oh my.

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

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.

 

[brucie]

In alt.html rf said:

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