Multiple and split stylesheets

Discussion in 'HTML' started by Tim W, Dec 13, 2012.

  1. Tim W

    Tim W Guest

    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
    Tim W, Dec 13, 2012
    #1
    1. Advertising

  2. 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/
    Jukka K. Korpela, Dec 13, 2012
    #2
    1. Advertising

  3. Tim W <> 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.
    Ben Bacarisse, Dec 13, 2012
    #3
  4. Tim W

    Tim W Guest

    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
    Tim W, Dec 14, 2012
    #4
  5. Tim W

    Tim W Guest

    On 13/12/2012 19:41, Ben Bacarisse wrote:
    > Tim W <> 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.
    Tim W, Dec 14, 2012
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dave Higgins
    Replies:
    12
    Views:
    983
    Nick Howes
    Nov 22, 2003
  2. steve
    Replies:
    4
    Views:
    1,038
    Baldo
    Dec 3, 2003
  3. Replies:
    2
    Views:
    450
  4. Kevin

    multiple xml stylesheets

    Kevin, Mar 5, 2008, in forum: XML
    Replies:
    0
    Views:
    388
    Kevin
    Mar 5, 2008
  5. Kevin

    Multiple stylesheets

    Kevin, Mar 5, 2008, in forum: XML
    Replies:
    0
    Views:
    385
    Kevin
    Mar 5, 2008
Loading...

Share This Page