使用PHP在我的CSS样式表中创建变量有什么缺点？

Question

One significant drawback of CSS is that one can't use variables. For example, I'd like to use variables to control the location of imported CSS, and it would be awesome to create variables for colors that are used repeatedly in a design.

One approach is to use a PHP file for the CSS stylesheet. In other words, create a "style.php" with...

<?php header("Content-type: text/css"); ?>

...at the top of the file, and then link to it using...

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

...in any file that uses these styles.

So what's the catch? I think it might be performance -- I did a few quick experiments in Firefox/Firebug and as one would expect, the CSS stylesheet is cached, but the PHP stylesheet isn't. So we're paying the price of an additional GET.

The other annoying thing is that TextMate does not syntax highlight properly for CSS in a .php file.

Are there other drawbacks? Have you used this approach, and if so, would you recommend it?

Answer 1

Performance is pretty much it. It's a good idea, but only if you cache it. You can send out browser headers to ask the client to pretty-please cache it, but if performance is an issue, you might benefit from developing a system through which you compile your PHP-enabled stylesheets to vanilla CSS files to serve as normal.

If you're going to bother to hand-roll your own compilation system, though, you might want to look into SASS , instead.

Answer 2

You should still be able to set the appropriate HTTP headers to instruct the browser to cache the dynamically generated CSS. You may be interested in checking out the following Google Code article for further reading on the topic:

• Optimize caching: Leverage browser caching

You could also consider generating a static CSS file from your script, and then include that from your web document. This eliminates realtime preprocessing and any performance concerns related to that, at the cost of having to "compile" your CSS files whenever you change them. However if you are already minifying CSS or JavaScript, you could simply add this extra step to your build process.

As for code highlighting, you may want to use normal CSS files with variables in them instead of hardcoded constants. Then your php preprocessor can load the CSS file and substitutes the variables for the actual values.

Answer 3

The drawback is that the file is not cached (like you pointed out) as well as the fact that the server must compute the CSS file for EACH request.

Loading the static file is pretty much no load for the server as it just reads and dumps the file, but for the PHP script it will have to execute it for each page request, which might add additional overhead.

You could possibly cache the CSS in memory or Memcache or something, but that will still not be a efficient as just using a static file.

Why not define the majority of your CSS in a static file, and then just override the specific styles that change?

Answer 4

Not exactly an answer, but an addition to @Matchu answer.
Here is a code sni[et I used several years ago, You can start play from that as base to develop your own method of client side caching rules. Anybody who feels he can improve that, be welcome.

<?php

//functions to cache HTML output Or JS/CSS output from a PHP script

class ControlHtmlCache

{

    //Will cache output of a php script on the browser for the giver hours.

    //Do notice, this will not cahce from now until now+hours, but rather for a rounded time period in the time stamp

    //For example, If I send 4 it will refresh the cache at approx 3,7,11,15,19,23 (In the summer, it will be 4,8,12....)

    static function client_side_cache($hours)

    {

        //in the event a session start is used, I have to clean all the #$%# headers it sends to prevent caching

        header('Cache-Control: ',true);

        header("Pragma: ", true);

        header("Expires: ", true);



        //get the If-Modified-Since header in a unix time format

        $headers = getallheaders();

        if (isset($headers['If-Modified-Since']))

        {

            $modifiedSince = explode(';', $headers['If-Modified-Since']);

            $modifiedSince = strtotime($modifiedSince[0]);

        }

        else

        {

            $modifiedSince = 0;

        }



        //calculate the Last-Modified timestamp

        $current_time=time();

        $last_modified=($current_time)/($hours*3600);

        $last_modified=(int)$last_modified;

        $last_modified=$last_modified*$hours*3600;



        //check cache not expires

        if ($last_modified <= $modifiedSince)

        {

            header('HTTP/1.1 304 Not Modified');

            exit();

        }

        else //emit a new Last-Modified (either cache expired or page wasn'r cached

        {

            Header('Last-Modified: '.gmdate("D, d M Y H:i:s",$last_modified).' GMT ');

        }

    }

}//EOF class