PDA

Click to See Complete Forum and Search --> : CSS Advice...

jesseainskeep
01-29-2007, 09:23 AM
I got some help a couple days ago, and it really helped a lot...

But with the help, a comment made me think about my CSS design I have for my site. The comment was made that it seemed like I had too may style sheets linked for my site. I have 8.

Does this seem excessive? There are basically 5 pieces to my site, (header, footer, navbar, subnav, content), and so each piece has it's own CSS file. I have another for the template, one for some defaults, and then sometimes for the individual page, if it's a form page or the calendar where I want some special formatting.

Does this seem excessive? Am I defeating the purpose of CSS by having so many rules and styles for my site? Should I combine these more and only have 3 style sheets?

The site is pretty large, and mainly runs dynamically. There is around 150 static pages, and then we have 4 databases that content is pulled out of for certain parts of the site. (Just for some reference). And the entire site is done in CSS. There is no table design at all. Also, the site should look almost the same in IE and Firefox, I've done a lot of testing to ensure this.

What do the experts think?
LeeU
01-29-2007, 09:31 AM
Why does each section have its own style sheet? That means each time a visitor show up they have to load 5+ style sheets. Why not combine them into one?
jesseainskeep
01-29-2007, 09:39 AM
Why does each section have its own style sheet? That means each time a visitor show up they have to load 5+ style sheets. Why not combine them into one?

Well... part of it was so that different style sheets could be used for the same part of the site. If they were in the 'for_visitors' part of the site vs. the 'for_members' or 'for_media', a different style sheet was dynamically inserted with the php script.

The other part was it was a little easier to manage. If I needed to change the spacing on the header, I just opened header.css, and only the styles for the header where there.

Initially I had a 'all_styles.css' file that was dynamically generated with php. I put a css MIME at the top, so it would read the php file as a css, and it generated a css file depending on what page it was on. This worked, but I thought part of CSS was that it cached the pages, so if you have the same style sheet on the next page, they don't have to load it again, it's already on their machine. I thought this was defeating the purpose because it literally generated a new CSS file each time.

Was I right or wrong in my thinking?
ray326
01-29-2007, 02:23 PM
This worked, but I thought part of CSS was that it cached the pages, so if you have the same style sheet on the next page, they don't have to load it again, it's already on their machine.The browser does have to check the server file against its local cache, though, and that process actually takes more time than the download time unless the sheet is quite large. Doing a server side embedded sheet as you had before is actually the most efficient way to do it.
KDLA
01-29-2007, 02:43 PM
You could apply an id or class to the <body> dependent upon the media, and call the styles according to that, rather than creating several stylesheets. This way, you don't have to rewrite all of your code, and still have the ability to combine it into one stylesheet.

body.media h1 {color: red;}
body.members h1 {color: blue;}


KDLA