CSS Structure

Hi,

I'm building my first site and so far I have my index page done and navbar for
several other pages. I used a lot of css styles to markup the first page with
just one long main.css Now I'm working on the second page I realize that maybe
I should have structured the css differently....like the styles that are not
global to all the pages should be in separate category to keep the list more
programmer friendly.
I was thinking of structuring the styles maybe like this:

Main.css (contains all styles, class and Id used or all pages)
index.css (contains styles, class and Id used only on the index page)
aboutUs.css ( contains styles, class and Id used only on aboutUs page).
etc.
etc.

Is this a practical approach or is there a better way? I want to be able to
quickly change a divs background color say on the about us page without
changing all the bg colors on all the pages by mistake and without having to
wad thru one long list of styles.

Any tips would be greatly appreciated. I'm still very new to this. If I'm on
the right track, I just need confirmation so that I don't wasting a lot of time
restructuring and possibly making matters worse.

Also, I was thinking...maybe I should just use a linked .css for the global
styles and embedded styles for specific pages? -Ron

Man, having a bunch of page-specific styles can get hard to manage no matter
how you do it.

But, yeah, your last option sounds best to me. Have a CSS file with all your
global styles, then any styles that will only be used on one page should be
embedded right on the page. Although, since I suggested it, I'm sure it's
somehow invalid in some new standard. I have a bad habit of liking things that
are quickly deprecated in new standards. Oh, well.

Even though certain styles are only used on 1 page, it is still best to
place the styles in an external style sheet. This is because you can
update the styles in the future and users that have already visited your
page (and have the files cached) will only need to re-download the style
sheet, not the content of the page.

HTH,
Randy

any styles that will only be used on one page should be
embedded right on the page.

Torn/Ron,

Some rules I use:

(1) Be biased in favor of externally linked or imported style sheets
whenever the particular css rule(s) would affect more than one page. Also,
whenever practical you want to include as many of the rules/declarations as
you can in a global style sheet.

(2) Write your css as efficiently (and clearly) as possible. for example,
use grouped selectors/declarations/shorthand and comments whenever possible.

(3) When there are no linked vs. @import issues and the particular rule(s)
are unique to a single page, or where you just want to redefine something
for just one page, I find it easier to use a document-specific style sheet
via style tags in the head section rather than using an external sheet for
just that one page. I find it less confusing and more efficient when the
CSS is right there with the other page code, paricularly when I have to come
back to it later.

(4)) Whenever possible, group your rules in functional blocks, for example,
all rules related to a left navbar would be grouped together or all rules
related to a particular header would be together and each group would be
seperated by descriptive comments. For example:

/* -----------------------------<Left Navbar>-----------------------------
*/
[left navbar-related css code]
/* -----------------------------</Left Navbar>-----------------------------
*/


/* -----------------------------<Sidebar
Header>----------------------------- */
[sidebar header-related css code]
/* -----------------------------</Sidebar
Header>----------------------------- */

Rule (5): Make SURE you understand the "cascade" and whenever possible rely
on importance/specificity (weight) of a declaration and not its physical
origin or order to determine which declaration applies in case of
conflict -- that way you're free to move your rules around within a style
sheet (e.g., group them as above) or to another style sheet that applies to
the same document and not have to worry about where they'll fall in the
"cascade."

I hope you find these useful and if someone else has some other/better
suggestions, jump in!

Jim Sheehan


"tornsoul" <webforumsuser (AT) macromedia (DOT) com> wrote

Hi,

I'm building my first site and so far I have my index page done and
navbar for
several other pages. I used a lot of css styles to markup the first page
with
just one long main.css Now I'm working on the second page I realize that
maybe
I should have structured the css differently....like the styles that are
not
global to all the pages should be in separate category to keep the list
more
programmer friendly.
I was thinking of structuring the styles maybe like this:

Main.css (contains all styles, class and Id used or all pages)
index.css (contains styles, class and Id used only on the index
page)
aboutUs.css ( contains styles, class and Id used only on aboutUs
page).
etc.
etc.

Is this a practical approach or is there a better way? I want to be able
to
quickly change a divs background color say on the about us page without
changing all the bg colors on all the pages by mistake and without having
to
wad thru one long list of styles.

Any tips would be greatly appreciated. I'm still very new to this. If I'm
on
the right track, I just need confirmation so that I don't wasting a lot of
time
restructuring and possibly making matters worse.

Also, I was thinking...maybe I should just use a linked .css for the
global
styles and embedded styles for specific pages? -Ron

thanks cmbergin. I will give it a try. You what is crazy, I only worked with a
table and cells a few times. So I learned page layouts entirely in css and
divs. Maybe thats why my css list is so huge and in need of consideration to
manage. I have no tables. -Ron

On Tue, 6 Jul 2004 14:47:10 +0000 (UTC), "tornsoul"
<webforumsuser (AT) macromedia (DOT) com> wrote:

I used a lot of css styles to markup the first page with
just one long main.css

In addition to other comments, if your style sheet is getting that
large, there's a very good possibility that you're not using the
inheritance and cascading functionality of CSS to your best advantage.


Gary

FYI,

My comment lines got screwed up by the line breaks.

Here are some shorter versions:

/* --------<Left Navbar>--------*/
[left navbar-related css code]
/* --------</Left Navbar>--------*/

You get the idea.

Jim Sheehan



"Jim Sheehan" <jrs (AT) jrssolutions (DOT) com> wrote

Torn/Ron,

Some rules I use:

(1) Be biased in favor of externally linked or imported style sheets
whenever the particular css rule(s) would affect more than one page. Also,
whenever practical you want to include as many of the rules/declarations
as
you can in a global style sheet.

(2) Write your css as efficiently (and clearly) as possible. for example,
use grouped selectors/declarations/shorthand and comments whenever
possible.

(3) When there are no linked vs. @import issues and the particular rule(s)
are unique to a single page, or where you just want to redefine something
for just one page, I find it easier to use a document-specific style sheet
via style tags in the head section rather than using an external sheet for
just that one page. I find it less confusing and more efficient when the
CSS is right there with the other page code, paricularly when I have to
come
back to it later.

(4)) Whenever possible, group your rules in functional blocks, for
example,
all rules related to a left navbar would be grouped together or all rules
related to a particular header would be together and each group would be
seperated by descriptive comments. For example:

/* -----------------------------<Left Navbar>-----------------------------
*/
[left navbar-related css code]
/* -----------------------------</Left
Navbar>-----------------------------
*/


/* -----------------------------<Sidebar
Header>----------------------------- */
[sidebar header-related css code]
/* -----------------------------</Sidebar
Header>----------------------------- */

Rule (5): Make SURE you understand the "cascade" and whenever possible
rely
on importance/specificity (weight) of a declaration and not its physical
origin or order to determine which declaration applies in case of
conflict -- that way you're free to move your rules around within a style
sheet (e.g., group them as above) or to another style sheet that applies
to
the same document and not have to worry about where they'll fall in the
"cascade."

I hope you find these useful and if someone else has some other/better
suggestions, jump in!

Jim Sheehan


"tornsoul" <webforumsuser (AT) macromedia (DOT) com> wrote in message
news:ccee1e$gui$1 (AT) forums (DOT) macromedia.com...
Hi,

I'm building my first site and so far I have my index page done and
navbar for
several other pages. I used a lot of css styles to markup the first page
with
just one long main.css Now I'm working on the second page I realize
that
maybe
I should have structured the css differently....like the styles that
are
not
global to all the pages should be in separate category to keep the list
more
programmer friendly.
I was thinking of structuring the styles maybe like this:

Main.css (contains all styles, class and Id used or all pages)
index.css (contains styles, class and Id used only on the index
page)
aboutUs.css ( contains styles, class and Id used only on aboutUs
page).
etc.
etc.

Is this a practical approach or is there a better way? I want to be
able
to
quickly change a divs background color say on the about us page without
changing all the bg colors on all the pages by mistake and without
having
to
wad thru one long list of styles.

Any tips would be greatly appreciated. I'm still very new to this. If
I'm
on
the right track, I just need confirmation so that I don't wasting a lot
of
time
restructuring and possibly making matters worse.

Also, I was thinking...maybe I should just use a linked .css for the
global
styles and embedded styles for specific pages? -Ron

Originally posted by: Newsgroup User
Even though certain styles are only used on 1 page, it is still best to
place the styles in an external style sheet. This is because you can
update the styles in the future and users that have already visited your
page (and have the files cached) will only need to re-download the style
sheet, not the content of the page.

HTH,
Randy


Wow! I was totally unaware of that. So even though a page is cached in a users
computer, if a user reloads that page, the browser will know to look for an
updated css file? Can I assume all browsers behave this way? So is this an
advantage designing with css over traditional tables that with tables if a
website is design updated, and the user never clears their cach, they may never
see the update? I'm getting in over my head. -Ron

Randy,

Assuming you're not changing your page-specific css everyday (or it doesn't
really matter because the page's content is changing regularly anyways), is
that really that big an issue? I mean once the page w/new embedded css is
cached, it's no longer an issue. Add to that all the people who clean their
cache regularly, the proliferation of broadband and the fact that I think
it's fair to assume that most sites change their page content more often
than page style and I guess I'm left wondering if that's really a big deal.

Just an observation.

Jim Sheehan



"Randy Edmunds" <randy_nospam (AT) macromedia (DOT) com> wrote

Even though certain styles are only used on 1 page, it is still best to
place the styles in an external style sheet. This is because you can
update the styles in the future and users that have already visited your
page (and have the files cached) will only need to re-download the style
sheet, not the content of the page.

HTH,
Randy


any styles that will only be used on one page should be
embedded right on the page.

In article <40EACE22.1030007 (AT) macromedia (DOT) com>,
Randy Edmunds <randy_nospam (AT) macromedia (DOT) com> wrote:

Even though certain styles are only used on 1 page, it is still best to
place the styles in an external style sheet. This is because you can
update the styles in the future and users that have already visited your
page (and have the files cached) will only need to re-download the style
sheet, not the content of the page.

HTH,
Randy


any styles that will only be used on one page should be
embedded right on the page.

i try keep my altogether with /* comments */ noting which page they
belong to. All redefined HTML tags grouped, link styles with comments
which is which then custom styles noting which belong only to one page.
that way, if you change your mind about the wonderful blue on the index,
about us and special page, you don't need to modify 3 different CSS
files.

In templates, I can have the <LINK> uneditable as i only need to apply
the CSS to text within editable regions.

--
raizel
remove the STARS from your eyes to reply