I am trying to figure out how I'm going to set up my style
sheets. My website consists of the following setup:
-welcome (site home page)
-about home
-about who's who
-news home
-news college
-news students
-news faculty
-faq home
...etc
Each section (home/about/news/faq) has different styling.
Within each section the color scheme stays the same, but
the layout may change slightly within the section.
I am serving my pages out using Coldfusion so I can
dynamically change things around. I am considering the
following options:
1. Have multiple stylesheets for each section/page and
then use Coldfusion to bring in different sheets when
appropriate. For that, I would have to make multiple
stylesheets for each section/page and put the appropriate
styles to format those areas. So, I would have the
following:
site.css (for the entire site)
about.css (for the entire about section)
abouthome.css (specific to the about home page)
aboutwhoswho.css (specific to the about who's who page)
news.css (for the entire news section)
newshome.css (specific to the news home page)
newscollege.css (specific to the news college page)
and so on. site.css would only contain styles that are
global throughout the entire site, each section stylesheet
(about.css, news.css, etc) would only contain styles used
within each section, and then any changes to specific
pages would have their own stylesheet (abouthome.css,
aboutwhoswho.css, etc). Then, I would use coldfusion to
update which stylesheet is used. So, for the College News
page it might look like the following in the source:
<link rel="stylesheet" href="site.css" type="text/css">
<link rel="stylesheet" href="news.css" type="text/css">
<link rel="stylesheet" href="newscollege.css"
type="text/css">
Like I mentioned above, I would only put appropriate
styles in each sheet. In other words, news.css is not
going to have layout formatting because that is handled in
newscollege.css (layout is specific to each page).
I know this is a bit cumbersome, but unfortunately the
layout does change slightly from page to page. I am going
to try and stay away from overriding styles because that
gets difficult to debug - unless absolutely necessary.
2. Instead of doing stylesheet switching, the other thing
I was thinking of was putting all my styles in one
stylesheet and just change the class of an outer tag (i.e.
body) to something like the following depending on what
page you're on:
<body class="welcome">
or
<body class="abouthome">
or
<body class="newsfaculty">
and then I would write styles accordingly:
.about {font:arial;}
.abouthome .column1{float:left;color:blue;}
.newsfaculty .column1{float:right;color:red;}
The advantage of method 2 is that everything could be put
in one stylesheet so I'm not trying to manage a bunch of
different sheets. For some reason, however, this method
doesn't sit that well. I guess it's because if you look
at the stylesheet and then at the source, you're going to
see class names defined in the sheet that are not in the
source until you actually navigate to that part of the
site because the class names aren't hard-coded.
Ultimately, I'm curious if anybody has used method 2 or
would it be considered bad form? I'm trying to see if
there are any major problems associated with that method
before I go and use it.
Thanks!
Mike
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
