Question

Why don’t people make .php files for their CSS and JavaScript files?

Adding <?php header("Content-type: text/javascript; charset: UTF-8"); ?> to the file makes it readable by browsers, and you can do the same thing to css files by setting the Content-type property to text/css.

It lets you use all the variables of PHP and methods into the other languages. Letting you, as an example, change the theme main colors depending on user preferences in css, or preloading data that your javascript can use on document load.

Are there bad sides of using this technique?

Answer 1

People do it more often than you think. You just don’t get to see it, because usually this technique is used in combination with URL rewriting, which means the browser can’t tell the difference between a statically-served .css file and a dynamic stylesheet generated by a PHP script.

However, there are a few strong reasons not to do it:

• In a default configuration, Apache treats PHP script output as ‘subject to change at any given time’, and sets appropriate headers to prevent caching (otherwise, dynamic content wouldn’t really work). This, however, means that the browser won’t cache your CSS and javascript, which is bad – they’ll be reloaded over the network for every single page load. If you have a few hundred page loads per second, this stuff absolutely matters, and even if you don’t, the page’s responsivity suffers considerably.
• CSS and Javascript, once deployed, rarely changes, and reasons to make it dynamic are really rare.
• Running a PHP script (even if it’s just to start up the interpreter) is more expensive than just serving a static file, so you should avoid it unless absolutely necessary.
• It’s pretty damn hard to make sure the Javascript you output is correct and secure; escaping dynamic values for Javascript isn’t as trivial as you’d think, and if those values are user-supplied, you are asking for trouble.

And there are a few alternatives that are easier to set up:

• Write a few stylesheets and select the right one dynamically.
• Make stylesheet rules based on class names, and set those dynamically in your HTML.
• For javascript, define the dynamic parts inside the parent document before including the static script. The most typical scenario is setting a few global variables inside the document and referencing them in the static script.
• Compile dynamic scripts into static files as part of the build / deployment process. This way, you get the comfort of PHP inside your CSS, but you still get to serve static files.

If you want to use PHP to generate CSS dynamically after all:

• Override the caching headers to allow browsers and proxies to cache them. You can even set the cache expiration to ‘never’, and add a bogus query string parameter (e.g. <link rel="stylesheet" type="text/css" href="http://example.com/stylesheet.css?dummy=121748283923">) and change it whenever the script changes: browsers will interpret this as a different URL and skip the cached version.
• Set up URL rewriting so that the script’s URL has a .css extension: some browsers (IE) are notorious for getting the MIME type wrong under some circumstances when the extension doesn’t match, despite correct Content-Type headers.