Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Multiple and split stylesheets

Reply
Thread Tools

Multiple and split stylesheets

 
 
Tim W
Guest
Posts: n/a
 
      12-13-2012
I have been learning a little about 'responsive' design. It looks like
even an ordinary website might need three stylesheets these days for two
sizes of screen and for printing. That means that if you want to alter
some trivial bit of styling you might have to do it three times in
different places which defeats the object really of having a single
stylesheet for a whole site.

I have seen sites with split stylsheets so you have typography and
colours in style.css and more structural stuff in layout.css . That
looks like a good idea because I could keep the stuff which I don't want
to change for different media in the style.css.

Two questions:
Is it good practice to split your stylesheet up? Pros? cons?
If I am going to be linking my html to maybe four or five stylesheets
and putting in that <!--[if lt IE 9]> crap I dare say I could have a
good stab at getting the syntax right but is a setup like that reliable
across different browsers?

Tim w
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      12-13-2012
2012-12-13 20:03, Tim W wrote:

> I have been learning a little about 'responsive' design. It looks like
> even an ordinary website might need three stylesheets these days for two
> sizes of screen and for printing.


Well, yes, quite possibly, though it really depends on the site. A
simple page can accommodate to any screen size with just one style sheet
(or even without one). The question is whether you need or want
essentially different layouts depending on viewport size.

And it's really for two (or more) ranges of sizes, not individual size.
Say, one layout up to 640 pixel width, and another for widths larger
than that.

> That means that if you want to alter
> some trivial bit of styling you might have to do it three times in
> different places which defeats the object really of having a single
> stylesheet for a whole site.


The idea is that you have general settings (e.g. font family and color
settings) in one style sheet and layout-related settings in separate
style sheets. But it is true that in some cases, a design change would
require changes to two (or more) style sheets,

> I have seen sites with split stylsheets so you have typography and
> colours in style.css and more structural stuff in layout.css .


Right. But part of typography, like font sizes, might need to be set in
layout.css.

> Is it good practice to split your stylesheet up? Pros? cons?


It's good practice. The overhead (due to separate HTTP requests for
different style sheets) is normally ignorable.

> If I am going to be linking my html to maybe four or five stylesheets
> and putting in that <!--[if lt IE 9]> crap I dare say I could have a
> good stab at getting the syntax right but is a setup like that reliable
> across different browsers?


You cannot use the <!--[if lt IE 9]> crap in an external stylesheet,
since it's an HTML trick. But you could use it to make the use of a
<link> conditional. On the other hand, does a normal web site really
need the trick?

--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
 
 
 
Ben Bacarisse
Guest
Posts: n/a
 
      12-13-2012
Tim W <(E-Mail Removed)> writes:

> I have been learning a little about 'responsive' design. It looks like
> even an ordinary website might need three stylesheets these days for
> two sizes of screen and for printing. That means that if you want to
> alter some trivial bit of styling you might have to do it three times
> in different places which defeats the object really of having a single
> stylesheet for a whole site.


This is not really a new situation. It's been the case for HTML for,
well, forever (framed sites of the 90s being a possible exception). The
solution there is to view HTML as the output of a process that builds
the site, either on-demand at the server (PHP, say) or using macros or
templates or whatever off-line. You can, if it seems worth it, do the
same for style sheets, but...

> I have seen sites with split stylsheets so you have typography and
> colours in style.css and more structural stuff in layout.css . That
> looks like a good idea because I could keep the stuff which I don't
> want to change for different media in the style.css.


.... some sort of structuring often avoids the need to go that far.

It's usually better to make the special cases into "diffs" (to borrow
from another field of computing) -- the print media rules, for example,
would be designed to correct what's wrong about the general style rules.
To be very specific, you might kill all backgrounds when printing rather
than turning them on in a screen style sheet and possibly in other
non-printing cases. That can often avoid any duplication at all.

> Two questions:
> Is it good practice to split your stylesheet up? Pros? cons?


There probably are cons, but I can't think of any. The extra time taken
to make, say, four small requests rather than one larger one is probably
insignificant.

> If I am going to be linking my html to maybe four or five stylesheets
> and putting in that <!--[if lt IE 9]> crap I dare say I could have a
> good stab at getting the syntax right but is a setup like that
> reliable across different browsers?


I did once use a conditional include, but there again it was a "diff" --
just a few rules to override the common case so that IE would play ball.

--
Ben.
 
Reply With Quote
 
Tim W
Guest
Posts: n/a
 
      12-14-2012
On 13/12/2012 19:36, Jukka K. Korpela wrote:
> 2012-12-13 20:03, Tim W wrote:
>
>> I have been learning a little about 'responsive' design. It looks like
>> even an ordinary website might need three stylesheets these days for two
>> sizes of screen and for printing.

>
> Well, yes, quite possibly, though it really depends on the site. A
> simple page can accommodate to any screen size with just one style sheet
> (or even without one). The question is whether you need or want
> essentially different layouts depending on viewport size.
>
> And it's really for two (or more) ranges of sizes, not individual size.
> Say, one layout up to 640 pixel width, and another for widths larger
> than that.
>
>> That means that if you want to alter
>> some trivial bit of styling you might have to do it three times in
>> different places which defeats the object really of having a single
>> stylesheet for a whole site.

>
> The idea is that you have general settings (e.g. font family and color
> settings) in one style sheet and layout-related settings in separate
> style sheets. But it is true that in some cases, a design change would
> require changes to two (or more) style sheets,
>
>> I have seen sites with split stylsheets so you have typography and
>> colours in style.css and more structural stuff in layout.css .

>
> Right. But part of typography, like font sizes, might need to be set in
> layout.css.
>
>> Is it good practice to split your stylesheet up? Pros? cons?

>
> It's good practice. The overhead (due to separate HTTP requests for
> different style sheets) is normally ignorable.
>
>> If I am going to be linking my html to maybe four or five stylesheets
>> and putting in that <!--[if lt IE 9]> crap I dare say I could have a
>> good stab at getting the syntax right but is a setup like that reliable
>> across different browsers?

>
> You cannot use the <!--[if lt IE 9]> crap in an external stylesheet,
> since it's an HTML trick. But you could use it to make the use of a
> <link> conditional. On the other hand, does a normal web site really
> need the trick?
>

Thanks, that pretty much confirms what I had sort of worked out for
myself. That 320 - 640 pixel screen width being the phone screen size
where the layout may have to change with a different css, and above that
width I can make the layout just a bit fluid and flexible.

And the <!--[if lt IE 9]> crap - I was thinking it might be necesary to
do that because IE8 doesn't recognise media queries but on further
reflection - who cares? No phone uses IE8. And people with old pcs can
just make their browser windows bigger.

tim W
 
Reply With Quote
 
Tim W
Guest
Posts: n/a
 
      12-14-2012
On 13/12/2012 19:41, Ben Bacarisse wrote:
> Tim W <(E-Mail Removed)> writes:
>
>> I have been learning a little about 'responsive' design. It looks like
>> even an ordinary website might need three stylesheets these days for
>> two sizes of screen and for printing. That means that if you want to
>> alter some trivial bit of styling you might have to do it three times
>> in different places which defeats the object really of having a single
>> stylesheet for a whole site.

>
> This is not really a new situation. It's been the case for HTML for,
> well, forever (framed sites of the 90s being a possible exception). The
> solution there is to view HTML as the output of a process that builds
> the site, either on-demand at the server (PHP, say) or using macros or
> templates or whatever off-line. You can, if it seems worth it, do the
> same for style sheets, but...
>
>> I have seen sites with split stylsheets so you have typography and
>> colours in style.css and more structural stuff in layout.css . That
>> looks like a good idea because I could keep the stuff which I don't
>> want to change for different media in the style.css.

>
> ... some sort of structuring often avoids the need to go that far.
>
> It's usually better to make the special cases into "diffs" (to borrow
> from another field of computing) -- the print media rules, for example,
> would be designed to correct what's wrong about the general style rules.
> To be very specific, you might kill all backgrounds when printing rather
> than turning them on in a screen style sheet and possibly in other
> non-printing cases. That can often avoid any duplication at all.
>
>> Two questions:
>> Is it good practice to split your stylesheet up? Pros? cons?

>
> There probably are cons, but I can't think of any. The extra time taken
> to make, say, four small requests rather than one larger one is probably
> insignificant.
>
>> If I am going to be linking my html to maybe four or five stylesheets
>> and putting in that <!--[if lt IE 9]> crap I dare say I could have a
>> good stab at getting the syntax right but is a setup like that
>> reliable across different browsers?

>
> I did once use a conditional include, but there again it was a "diff" --
> just a few rules to override the common case so that IE would play ball.
>

Thanks for that.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Multiple stylesheets Kevin XML 0 03-05-2008 04:19 PM
multiple xml stylesheets Kevin XML 0 03-05-2008 04:12 PM
Why does split operate over multiple lines in the absence of "ms" ? And why doesn't $_ work with split? Sara Perl Misc 6 04-12-2004 09:07 AM
using multiple stylesheets with 1 xml file steve XML 4 12-03-2003 10:03 AM
multiple CSS stylesheets: do all download? Dave Higgins HTML 12 11-22-2003 10:28 AM



Advertisments