Too much CSS in my .css file

He has: 688 posts

Joined: Feb 2001

The more I use CSS the better for my site, but I find my one external style.css file getting rather large. For instance, I have a few different pages with lots of css code specific to that one special page but not needed anywhere else on my site. As far as I know it isn't causing any problems but it's just a hassle finding the part I want and it seems to be an unnecessary waste.

So why do I use only one CSS file? Because I'm not too smart. Roll eyes I use a header and footer file on every page of my site, givng me a consistant template. That header file includes all of the information, including this typical code:

<link rel="stylesheet" href="/style.css" type="text/css">
'

So given the way I do headers and such, is there a way I can call upon ADDITIONAL css files (in addition to a site-wide standard css file) only when I need to for special pages? I know I can do all the CSS inline but I'm looking for a way to keep it in a neat file. How do I get anything page specific in the header without having it for every other page too? This may not actually be a CSS solution. Perhaps my header file needs a line $extra_css and I define that varaible above the call for the header? Seems messy but that's the only way I know how to accomplish this?

Ideas? Thanks.

P.S. Not to confuse this issue more, but I don't understand the advantages/disadvantages of using @import instead of the method I posted above.

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

Wouldn't a simple PHP (I'm assuming you have PHP) if() function work?

if($_GET['page'] == "home") {
echo '<link rel="stylesheet" href="/style_home.css" type="text/css">';
}
'

This does, of course, get a bit messy if you need a lot of different CSS files for different pages.

The other alternative, would be to look through your CSS and take out what you need. In other words, streamline your CSS.

He has: 688 posts

Joined: Feb 2001

I only have 3 or 4 special pages which need their own special css codes (on top of my regular site-wide css code). So I suppose I could have one standard css link and then additional css files load only from the if/then php. But I can't see more than 2 or 3 css files ever needing to be loaded and used on a page at the same time.

Question about the code you wrote. Sounds like that's along the same lines I was thinking only more efficient. I barely use enough raw php to recognize that I've seen GET['page'] before but I'm unclear on how that exactly works. In your example would "home" need to be the file name like home.php or a directory name like /home/ ? Don't laugh:laugh:, I hardly ever use straight php except for calling my header and footer or a pre-mader script.

Thanks.

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

$_GET variables are variables from the URL so in this case, $_GET['page'] would be from the index.php?page=thispage and would have a value of "thispage"

In the above example, I was refering to the page "home.php" not "/home/" although it could be anything. "home" is from the GET variable in the URL index.php?page=home

Do you get it? If not, say so and I'll try explain it again.

He has: 688 posts

Joined: Feb 2001

Renegade wrote: $_GET variables are variables from the URL so in this case, $_GET['page'] would be from the index.php?page=thispage and would have a value of "thispage"

In the above example, I was refering to the page "home.php" not "/home/" although it could be anything. "home" is from the GET variable in the URL index.php?page=home

Do you get it? If not, say so and I'll try explain it again.

I thought I understood when you said "I was refering to the page "home.php"" but then I lost it when you said "index.php?page=home" Shocked I've seen other sites change pages with something like ?page= but I only know how to hard code pages. In short, I is still a bit confuzzed. Confused (Sorry)

Abhishek Reddy's picture

He has: 3,348 posts

Joined: Jul 2001

Let's be more general. What you want is

if ( this is the home page ) {
  echo '<link rel="stylesheet" href="/style_home.css" type="text/css">';
}
'

What we need is a way to check whether "this is the home page".

One way of doing this is if you are using a system that loads pages based on query string variables (GET), you can check that. How the query string works with PHP is:

  • You have a url to index.php?mypage=contactme
  • In the special array $_GET, an element is created called $_GET['mypage']. Its value is "contactme"
  • You might then have your PHP code do something like include($_GET['mypage'] . ".php") -- that is, it will include("contactme.php") into your page.
  • Whereas you currently probably have separate pages that call on constant header/footer files, using this system you'd have one index.php file that selects different "body" files

You can use this to your advantage for loading CSS files, among other things. If index.php?mypage=home loads your home page, you can slot that into the if() control above.

Of course, to refine all this, you'd be swimming in if()s or switch()s, and you'd basically reinvent the wheel (in this case, a CMS or template system).

Another way of doing this is to see what options your existing system offers you to detect which page you're on. Are you using a CMS? What PHP scripts are you using? How are your files structured?

He has: 688 posts

Joined: Feb 2001

Hmmm. I think you're right about reinventing the wheel in my case. Especially when my "problem" is just my inconvenience of not ultra-organizing my css into seperate files. In reality everything works fine (loading all the CSS even if it's not used on that page)

But anyhow, to answer your questions -

I'm just taking a guess but does CMS mean Content Management System? If so, none. Except for occasionally adding news to my homepage thru an online script, most page content is typed directly into text files at home and then uploaded via FTP. Stoneaged I know but that's all I think I need.

To answer your question about how my files are structured, here's a few examples to help you figure out how simple-minded I do things [1] [2]. Note that those examples were done long before I learned how to use CSS correctly, so ignore the crappy code and just look at the page urls to get an idea about how I organize things and rarely use anything but static page urls. The only thing I think you won't be able to see is how each page is set up before the includes. All the non-script pages work like this

Quote: 1) simple php call to include header (including menu)
2) unique page content
3) simple php call to include footer

Regarding scripts I use, some sites like example #2 above have no scripts, while I often use the news script and gallery script found in example #1 above. Maybe an occasional guestbook script (which died in my homepage and I haven't fixed it yet)

He has: 688 posts

Joined: Feb 2001

Oooo. I had an idea about this very minor issue and I wanted to know if this is a possible easy solution.

Most of my pages that require great amounts of special css codes are within a directory other than the main public_html. Like instead of domain.com/page.php it would (or could be forced to be) domain.com/directory/page.php. So if I decide to name all of my special css files the same name, just like having an index.php file in each directory, I can have "additionalstylestyle.css" in each directory without them interfereing with eachother. So now my question is this: Since I can call files in the same directory by simply not using the full path/url or slash characters, can't I just make some php statement that says "if 'additionalstyle.css' exists in this directory then include it?

So question #1 was "will this idea work"? Question #2 is "will this actual code work properly to accomplish this?" I made up the code below by throwing together a few snippets I found but I have no idea if this is valid code (I don't even have a clue as to what that that "r" is for) .

<link rel="stylesheet" href="/style.css" title="Default Blue" type="text/css">
<? $file="additionalstyle.css";
if (@fclose(@fopen("$file", "r"))) {
print("<link rel=\"stylesheet\" href=\"additionalstyle.css\" title=\"Additional Style\" type=\"text/css\">");
} else {
print("<!-- no additional css files found -->");
}
?>
'

P.S. I still don't understand the difference between using link rel="stylesheet" or @import to use and external css file. Does it matter which method is used?

CptAwesome's picture

He has: 370 posts

Joined: Dec 2004

@IMPORT only supplies GET POST and Cookie variables, not CSS, always remember CSS is clientside, and php is serverside. There are a lot of fancy ways that it could be done, including having the CSS file a php file.

<link rel="stylesheet" href="styles.php?style=pagename" title="Additional Style" type="text/css">
'

then all you have to do is a series of ifs or breaks in a php file:

<?

if($style == 'blue')
{
print("
body {
color: blue;
  }
");
}
else
{
print("
body {
color: black;
  }
");
}
?>
'

You could even replace your main file with a php one, and remember, php files don't have to be 100% php, so you can just have some ifs for certain pages that need calling, and no ?style=whatever after the CSS filename.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.