Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   Separate stylesheets versus one big stylesheet:Which is best? (http://www.velocityreviews.com/forums/t159647-separate-stylesheets-versus-one-big-stylesheet-which-is-best.html)

Deryck 10-13-2004 11:54 AM

Separate stylesheets versus one big stylesheet:Which is best?
 
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 10-13-2004 12:02 PM

Re: Separate stylesheets versus one big stylesheet:Which is best?
 
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

Noozer 10-13-2004 12:04 PM

Re: Separate stylesheets versus one big stylesheet:Which is best?
 

"Deryck" <deryck@REMOVElonghope.co.uk> wrote in message
news:2t4jatF1rhmp3U1@uni-berlin.de...
> 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 10-13-2004 12:10 PM

Re: Separate stylesheets versus one big stylesheet:Which is best?
 
Noozer wrote:
> "Deryck" <deryck@REMOVElonghope.co.uk> wrote in message
> news:2t4jatF1rhmp3U1@uni-berlin.de...
>
>>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 #

brucie 10-13-2004 12:20 PM

Re: Separate stylesheets versus one big stylesheet:Which is best?
 
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

SpaceGirl 10-13-2004 01:09 PM

Re: Separate stylesheets versus one big stylesheet:Which is best?
 
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 10-13-2004 01:10 PM

Re: Separate stylesheets versus one big stylesheet:Which is best?
 
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 #

brucie 10-13-2004 01:32 PM

Re: Separate stylesheets versus one big stylesheet:Which is best?
 
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

Deryck 10-13-2004 01:47 PM

Re: Separate stylesheets versus one big stylesheet:Which is best?
 

"SpaceGirl" <NOtheSpaceGirlSPAM@subhuman.net> wrote in message
news:2t4k95F1q74lvU1@uni-berlin.de...
>
> 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 10-13-2004 01:47 PM

Re: Separate stylesheets versus one big stylesheet:Which is best?
 
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/subh...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 #


All times are GMT. The time now is 10:16 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.