6

If I'm writing code in PHP is there a reason why I would use a CSS Preprocessor instead of PHP? For example, I could use PHP in my CSS file by having this in my header:

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

That way I could pass it variables like style.php?color=#000

Or I could use something like LESS to preprocess my CSS. If I use less.js, I'm not sure how I would be able to pass variables like in the previous example.

Now, I've heard that PHP CSS files can't be cached so I can see why that would be a problem, especially if the CSS file was large. But I'd like the ability to pass variables to my CSS sheet.

Can someone tell me a little more about why I'd use one over the other, and/or how I would pass variables to my .less file if I used less.js?

Improve this question
3
  • 2
    You could use the LESS PHP compiler which allows processing of strings of CSS or entire files. Commented Jan 29, 2012 at 18:35
  • I recommend Stylus over LESS. You can "pass variables" by using the preprocessor's "include-this-other-file" functionality to include a PHP file which sets the "variables", but this would as you say defeat caching. You probably want the "variables" to be set via Javascript to have an effect on the CSS, not set in the CSS itself. Commented Jan 29, 2012 at 18:35
  • 2
    PHP CSS can be cached, you need to set the appropriate headers and/or use file-based caching. Commented Jan 29, 2012 at 18:36

3 Answers 3

Reset to default
4

Now, I've heard that PHP CSS files can't be cached so I can see why that would be a problem, especially if the CSS file was large.

PHP CSS files can be cached, but if you pass dynamic values to them, the point of caching is usually lost. If you have a dynamic value that may change with every request, caching becomes pointless.

Also, shoving huge amounts of mostly static CSS through the PHP preprocessor tends to be a waste of server resources.

The much easier approach is usually to have static CSS files, and to declare all dynamic values in the page body:

<!-- the static style sheet declares all the static values --> 
<link rel="stylesheet" type="text/css" href="static.css"> 
<!-- now you override all the dynamic values -->
<style>
  .classname { color: <?php echo $color; ?> }
</style>

This way, you can have dynamic values as you please, but you still avoid having a lot of CSS data being processed by PHP.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Pekka it's not a good idea to use this scheme for environments where there are more than one page. You lose the core power of .css of exactly avoiding <style> entries all over the site. Sorry for down-voting on just that point
@Ahmed Masud: If the dynamic styles differ on a per-page basis, then this is the best approach. Sites do not necessarily need a single stylesheet to cover all cases.
@Ahmed show me a better implementation of dynamic CSS than this (note this is about values that can change on every request). This is the one case where <style> entries are perfectly fine
All GET requests can be cached, incl. "variables".
@Pekka: You were discussing something else firsthand, so please don't misread what I wrote. I have not said you should bloat the part that is not cacheable only that GET requests can be cached even if query parameters have been added. It's also possible to not add an additional style-sheet but add another class to the body element and the cached style-sheet applies rules as needed.
|
3

Any and all HTTP requests CAN be cached, you just generate appropriate cache headers see rfc2616.

Interestingly, caching will work very nicely because if your GET values change then you DON'T want the PHP to be cached anyhow. So go ahead and enjoy using them.

Part of your css should be something like:

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

Here is a very interesting tutorial on it: http://css-tricks.com/snippets/php/intelligent-php-cache-control/

Improve this answer

1 Comment

"... you don't want the PHP to be cached anyhow" - that's exactly the point why this is not a great method if your dynamic values can change per user, or even per page. If you have 10 value changes, the user's browser is forced to load the style sheet 10 times.
1

Beside browser caching, static files are much better for server-side caching:

Static CSS files can be cached into memory (and even precompressed with some servers like nginx) which enables you to serve them from cookie-less static-serving domain. Using a web server like nginx can create a huge performance boost since less RAM is used. If you don't have much RAM or have a lot of traffic, the difference can be enormous.

If you have a small website than it does not matter much.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.