...

View Full Version : Is it practical to seperate structural styles from presentation styles?



Grant Palin
02-16-2005, 01:33 AM
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?

jkd
02-16-2005, 02:04 AM
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.

bradyj
02-16-2005, 02:10 AM
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).

Grant Palin
02-16-2005, 07:34 PM
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?

bradyj
02-16-2005, 09:16 PM
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.

Mhtml
02-17-2005, 07:46 AM
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.

ReadMe.txt
02-17-2005, 09:33 PM
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.

Grant Palin
02-17-2005, 09:48 PM
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.

Grant Palin
02-17-2005, 10:23 PM
I was just doing a little reading on CSS management...Found links to two interesting articles through 456 Berea Street (http://www.456bereastreet.com/archive/200502/css_management/), 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 (http://cott.ringger.com/notes/documentation.html) that extensively documents the stylesheets for the whole site...Yikes! :eek:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum