Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post

    Is it practical to seperate structural styles from presentation styles?

    Say I have a stylesheet with numerous rules. Most of the rules are for defining structure and appearance (e.g. colour, border) of page elements. In the interest of making site updates easier, does it make sense to seperate the structural styles from the colour styles (into seperate files maybe)? So that in one location is the CSS defining the structure of pages (e.g. positioning elements, turning lists into navigation, etc) and in another location is the CSS defining the appearance, including colours and borders?

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Well, it's not really impractical. At worst, you reuse each selector again in the color stylesheet, adding some extra size. But you can now disable the colors, dynamically change the color sheet, etc, without worrying about reduplicating the structural rules.

    When I can, I do prefer to separate structure from "style" style.

  • #3
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've done this once for a client -- it made a lot of sense. They dynamically changed their colors and background images -- and it protected them from accidentally fudging the layout. You could do this numerous ways (two separate imports in the page, one link in the page with two separate imports in that css page linked... or just one linked css with all the colors, and an import for the structure css).
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    I'd been thinking that it would be good to separate styles appropriately such that you can fiddle with the colours without changing structure.

    In my case, I am working on redesigning an intranet website, and am experimenting with some different colour schemes. It occurred to me that changing colours would be easier if there was a separate stylesheet just for colours, so I did just that. It wasn't a big deal separating the colour styles from structure styles. SO now I can work on several different colour stylesheets without having to copy structural styles.

    bradyj, you mentioned some different ways to add styles to a document; which do you think might be ideal? Currently I'm linking the main stylesheet (the one for structure) in the HTML document, and doing an @import inside that stylesheet for a particular colour stylesheet. Might there be a better way, such as linking each stylesheet from the HTML document, or something else?

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Grant Palin
    bradyj, you mentioned some different ways to add styles to a document; which do you think might be ideal? Currently I'm linking the main stylesheet (the one for structure) in the HTML document, and doing an @import inside that stylesheet for a particular colour stylesheet. Might there be a better way, such as linking each stylesheet from the HTML document, or something else?
    That is my preferred method -- I don't know if it's more right than wrong, but It is more clean code, so I go with it

    Othewise simply two @imports in the html, or two links in the html.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #6
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    I've gone for this approach in my latest site.
    I used @import for the structure. Mainly just for browser degradation reasons. I'm sure that'll never have to come into play but still it should work...I think.
    Omnis mico antequam dominus Spookster!

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i would have the structure in a regular <link> element

    then you have your colours in a <link> element with a title atribute, this way you can add addtional colour sheets and use rel="alternate stylesheet" to allow switching between them.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by ReadMe.txt
    i would have the structure in a regular <link> element

    then you have your colours in a <link> element with a title atribute, this way you can add addtional colour sheets and use rel="alternate stylesheet" to allow switching between them.
    I thought of that already! In fact, I've already seperated my structure styles from the colour styles, and have created several different colour stylesheets.

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    I was just doing a little reading on CSS management...Found links to two interesting articles through 456 Berea Street, talking about possible benefits and potential pitfalls in managing your site's stylesheets, especially if using more than 5 sheets at a time!

    Was reading the comments on the second article, and found a link to a webpage that extensively documents the stylesheets for the whole site...Yikes!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •