1 or multiple style sheets?

[President Obama]

Atm I have 1 big style sheet for 6 different pages. Its fairly massive because each page has a fair difference in it, I'm just wondering if its better to use multiple style sheets as in

 

1 generic style sheet which would control layout no more

1 style sheet for each page which controls all the different elements.

 

Multiple style sheets would require more work, would it be worth it?

[haku]

The bigger problem with multiple stylsheets is that it increases the number of HTTP requests to the server. HTTP requests are generally the biggest bottleneck to site-loading times. So it's better to make sure you have only one stylesheet per page.

 

There is something to be said for having all your data in one stylesheet. Browsers will cache the stylesheet (if your server tells them to), which means after downloading the stylesheet on one page, it is already available on other pages without having to download it.

 

As such, I personally put everything in one stylesheet.

[fortnox007]

I usually have 1 stylesheet, and use conditional comment around a ie6  stylesheet.

Also it might be nice to have a look it to sprites.

[SuperBlue]

You can however increase the number of parallel downloads, by using a sub domains to host a few files, hence the difference is negligible on decent connections.

 

Keeping things separate is nice for readability, so another option would be to combine the files into one big file before uploading it to your server.

[fortnox007]

hey blueboden,

 

Small question since i don't know all about that, using multiple hosts to provide content, wouldnt that also increase the nummber of requests? I have seen that face book has a special server for their images.

[haku]

It's not the total number of requests that matters, it's the number of requests to a single domain name. The internet itself is quite old, and broadband didn't exist when the HTTP 1.1 spec was written. As such, parallel (concurrent, at the same time) HTTP requests to the server were limited to two PER DOMAIN. This means that if your page loads from five different domains, you could actually have 10 parallel HTTP requests going. However, sub-domains (something.site.com) are considered a separate domain. As such, if you want to have multiple CSS/JS/Image requests going at once, you can spread them out over separate subdomains, and you won't be throttled as a result.

[fortnox007]

oh wow that awesome to know. thanks alot for that haku, i bookmarked this

[Topshed]

It depends on what you are trying to do

Large styles heets  not only take a time to load but there's an awful lot to go through  because of the cascading effect.

For instance I have four basic color schemes  and I have one file for each Simple and effectrive

I also need  to produce tables for showing MYsql / php  data so

I have some css files table_LL,  table_LC,  table_CL,  & table_CC

Simply put the first letter after the under_bar is TH alignment the second is the TD alignment

ie:

table_CL,css

table, tbody, tr, td {
border: 1px solid #0000FF;                           /* not needed if you don't use borders*/
font: normal  Verdana,Arial,Helvetica,Geneva,sans-serif;  /* Your choice*/
font-size: 0.97em;                                                         /* Ditto*/
margin: auto;                                                          /* For all other browsers except IE */ 
text-align: left;}

th {
border: 1px solid #FFFFFF;
font: bold 1em ;        /*Font list not needed although you might get a validator Warning */
margin: auto;  /* For all other browsers except IE */ 
text-align: center;}

[haku]

With the speed of the internet these days, large stylesheets are not too much of an issue. A small image will be larger than even a long stylesheet, and there aren't many sites that don't have images on them these days. As such, the bottleneck is in the number of http requests NOT the size of the stylesheet.

 

Cascading will happen regardless if the code is broken up into one stylesheet or many.