Lord of the Rings or 300? What is your strategy? [Archive]

View Full Version : Lord of the Rings or 300? What is your strategy?

BLiZZaRD

01-04-2008, 06:19 AM

When using CSS files for your website, do you find it better to be LotR or 300?

Do you have one CSS to rule them all, who cares about file size, or

Do you have many many smaller css files and link to the needed one(s) on each page as you see fit?

Currently I have 7 CSS files for one site, and I find it a bit ridiculous. I was thinking of paring it down to one really long one. What do you all think?

djr33

01-04-2008, 06:32 AM

I'd recommend having as few as you can, though not overloading any.

You load a CSS file with 20 extra properties not used on a page... why?

There are a few options to make things more efficient:

1. Design a standard CSS file for your whole site. Include this on every page. Then make files for any sections or individual pages that you want custom things on. Then use a couple on a page.

2. Use PHP to generate different stylesheets based on need. I put a quick tutorial on that in the tutorials section if you'd need help figuring out how (though you probably don't).

Twey

01-04-2008, 07:24 AM

I use one long one, unless it's really huge or contains styles I know I'm never going to need on any other page.

BLiZZaRD

01-04-2008, 09:05 AM

I would like to do just one. Part of my issue is that I have 3 main body places of my site, and the only difference between them (as far as CSS is concerned) is the background color and font color/size.

Now if I could find a way to use 1 CSS file with 3 body {} sections I would do that.

It still doesn't solve my 7+ current CSS files, I need to whittle those down, I guess either 3 max, or I need to find something uniform for the body{} and just go with one.

Twey

01-04-2008, 09:28 AM

You can apply a class or ID to the body.

BLiZZaRD

01-04-2008, 11:34 AM

OOOOO... Yeah I forgot about that! I will have to give that a try... :)

boogyman

01-04-2008, 01:21 PM

if you do not want to do that you could also have separate style sheets just for the color difference, so you would include the appropriate body style according to some action item (url)

__DOC_TYPE___
<html>
<head>
<?php
if($var == $val) { include_once("/css/body-green.css"); }
else if($var2 == $val2){ include_once("/css/body-blue.css"); }
else { include_once("/css/body-gray.css"); }
?>
<link type="text/css" rel="stylesheet" href="/css/styles.css" media="all">
<title>TITLE</title>
</head>
...

where the body-color css files contain

body {
background-color: #00ff00;
...
}

BLiZZaRD

01-04-2008, 02:29 PM

Thanks for that. I will keep it in mind. Although I will probably be better off with leaving the URL alone.

Twey

01-04-2008, 03:33 PM

You could also use PHP to generate the stylesheet and pass a GET variable.