Articles
Goodbye Forever, .css Files
Designers: when was the last time you created a new file with an .html extension? Hopefully, it’s been quite a while. I personally have the habit of making even the most mundane Under Construction Splash a PHP file, just in case I want the file to be able to do something.
CSS files are just text files with a fancy extension. Lose ‘em. Their utterly static nature is a harbinger of inflexibility that will result in silly find/replace changes down the line. I urge you to abandon the arbitrary .css extension altogether, and instead create your CSS files in PHP.
Let PHP Fool Your Browser
The process only takes one line. Create a new php file and add this line to the top (unless you’re in ExpressionEngine):
<?php header(‘Content-type: text/css’); ?>
That just identifies the PHP file as CSS for your browser.
(Bonus tip: If you use TextMate for your editing, you can fool it into using CSS syntax highlighting by adding /* <style> */ on the following line.)
That code will always go at the top of your newly empowered PHP stylesheets. (The link rel= line in your page’s <head> doesn’t require anything fancy - just reference your new filename.)
Let PHP Write Your CSS
Now you’re ready for some mini-functions that will make your life easier. Here’s a simplified version of one I always use:
function gi($image) {
$imgRoot = "/";
echo "url(" . $imgRoot . "/" . $image . ")";
}
All this does is output CSS’ image reference syntax, so when you move a website from server to server, the $imgRoot reference can be easily updated to reflect the location of all your images. So, your CSS line becomes:
background:<?php gi('cdv4_header.jpg'); ?>;
For example, when I make small stand-alone sites for Griffin, I build them on my local Leopard install and then upload the final site to our server. Functions like this allow me to fix all the references with one or two config lines.
Yep, I could just reference everything relatively, but I find that this technique is more readable and flexible. I actually use that function in league with a handful of other tiny work-enhancing functions, but that’s a story for another time.
Here’s the takeaway: using CSS as PHP allows you to automate annoying aspects of CSS’ static inflexibility. My example is minimal, but get creative!
Some other ideas you should try:
- Define an array of color hex values, and make a
gc()function to echo those values, so you just have to writecolor:<?php gc(1); ?>;in your stylesheet - Keep your main stylesheet tidy: put your basic CSS reset in a separate file and use
php includeto embed it - Use a
forloop to automate repetitive code, like navigation links or tiled elements
Abandoning This Approach Entirely
Admittedly, the usefulness of tiny PHP functions is going to depend heavily on the coding style of the person who creates them — the quickie functions that make your life easier might differ from the ones that I prefer. What the static, unwieldy, repetitive CSS format really needs is a complete reboot from the ground up.
That wonderful day may never come — at least without a painful, bloody transition period — but the tools to create said unwieldy code are continuing to improve.
In case you’ve never seen it, Sass is a beautiful, downright poetic library that enables a new and wonderful way to write CSS. Downside: at the moment, it’s a Ruby gem. When somebody ports it to PHP, I will be tremendously happy; until then, it’s the little functions that help get me through the day.
Hopefully, all of these tips will become extremely unnecessary soon, but until then, let a little PHP lighten your CSS load.
Information
Cameron Daigle is a designer who scribbles information in notebooks, in his head, or (ever so occasionally) on this website.