Too much CSS in my .css file
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. 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 posted this at 00:42 — 4th January 2005.
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.
fifeclub posted this at 02:53 — 4th January 2005.
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 posted this at 10:09 — 4th January 2005.
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.
fifeclub posted this at 14:07 — 4th January 2005.
He has: 688 posts
Joined: Feb 2001
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" 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. (Sorry)
Abhishek Reddy posted this at 15:54 — 4th January 2005.
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 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?
fifeclub posted this at 17:39 — 4th January 2005.
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
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)
fifeclub posted this at 14:48 — 13th January 2005.
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 posted this at 10:30 — 16th January 2005.
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.