is it bad practice to require php files rather than link to js and css?

Question

I want to put snippets like these inside of a few php files and then require them in my main page, instead of using "pure" css and js files. I mean, I already do essentially this for my HTML DOM.

this:

<script type='text/javascript'>
var foo = <?php echo $bar; ?>;
</script>

or this:

<style type='text/css'>
.foo{
background-image:url('<?php echo $bar; ?>image.png');
}
</style>

is that really bad practice?

and, if it is, what are the pros and cons of such an approach?

Answer 1

I don't think there's anything necessarily bad about this. It's going to be an eye-sore for some people, but that's alright. Just be sure to keep this integration to a minimum, you really don't want a lot of php interspersed in your css, javascript, and html.

Answer 2

Putting Javascript through the PHP interpreter is probably not a good idea. Likewise, CSS

• It encourages the antipattern of having server-side code writing client side code
• It makes it harder to test the JS and CSS in isolation (if they start being full of PHP code)
• It makes the PHP output bigger
• Clients will not cache part of a page, only a whole object

To expand on the last part - Javascript and CSS can get big (compared to HTML). If you have the client browser cache them, it does not need to download them.

True, including in the main document means there is no separate request which reduces overhead (particularly with SSL), but the client still needs to download the file. Having it coming from client cache is usually faster.

On the other hand, your code

<script type='text/javascript'>
var foo = <?php echo $bar; ?>;
</script>

Looks like it's a piece of data, not Javascript code, so it might vary. You may also want to escape $bar correctly.

Answer 3

Although CSS is not a problem, you'd have trouble if you wanted to send this as an HTTP response via AJAX.

<script type='text/javascript'>
var foo = <?php echo $bar; ?>;
</script>

AJAX won't allow Javascript for security reasons.

Best practice is to keep your Javascript in a separate file. That way client-side caching of the script will be to your advantage in terms of traffic too.