Multiple and split stylesheets

[Tim W]

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

 

[Jukka K. Korpela]

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?

 

[Ben Bacarisse]

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.

 

[Tim W]

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

 

[Tim W]

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.