Dynamic CSS through PHP

March 31st, 2011

When writing CSS,you will find yourself repeating information a lot, which is always a bad thing in programming. CSS 2 lacks constants, which would allow us to define a value once and refer to it many times. Instead, we are forced to repeat the actual value many times, making updating CSS a process that is […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

When writing CSS,you will find yourself repeating information a lot, which is always a bad thing in programming. CSS 2 lacks constants, which would allow us to define a value once and refer to it many times. Instead, we are forced to repeat the actual value many times, making updating CSS a process that is prone to errors.

Also, in order to reduce the number of connections a client must make to the server, it’s necessary to place all CSS in a single file. But this may mean that you end up with a lot of possibly unrelated CSS in a single file, making it difficult to navigate while you’re developing. There are times when it’s simply handier to have lots of  small files instead of one big file, but it’s just not practical for download by your visitors.

These two problems can be resolved by loading your CSS through PHP. Instead of serving the CSS file directly, i.e.

you can have the server load a PHP script that produces CSS like so:
Note that this will only work if the scripts emits a text/css header:
Now your PHP script can define some constants that you simply insert into your CSS:
Your script could also load various CSS files for processing and output the result in one go, solving the second problem we found. But we can do better still. You can have your PHP script use Smarty to produce the CSS, making the use of contants easier (and prettier):
The file style.css would be the main style sheet manifold; it could load other (sub-) stylesheets. For instance:
The values that were assigned to defaultfont, thinborder and inputcolor can be used in the sub-stylesheets like so:

Did this article help you out? Please help us find more time to write useful guides & articles like this by donating a buck or two. It'll keep us coffee-fueled. Thanks!

Comments

4 4 Responses to “Dynamic CSS through PHP”
  1. Robert-Jan says:

    How about this?

    cache.php

    body
    {
    background-color:

    }

    alert(‘Javascript through php file.’);

    Loading method for CSS and JS

    Thanks for the example by the way, I build this code a bit off using yours. 🙂

  2. Krzysiu says:

    Hey! In Google, for keyword “smarty for css” you were 7th and first ontopic result. That’s exactly what I mean. I needed lightweight alternative for SASS/LESS with on-the-fly compiling. I wonder why Smarty doesn’t support CSS officially.

    I’ll make SmartyCSS derivative class, I’ll add some functions, modifiers… Like {“#f00″|hue:+15} or {$someCol|invert} – isn’t it beautiful? Or #foo:content {{fa ico=”info”}} which adds respective hex code. Of course snippets for multibrowser support etc. will be great as well. I’m not sure about {} from CSS and Smarty, but if it would cause problems, we could always change it – especially in derivative class we can set default characters to something rarer in CSS like .

Leave a Reply

Your email address will not be published. Required fields are marked *