views:

134

answers:

3

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?

+1  A: 

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.

Jonathan Sampson
Heck with that! Make a `css.php` take takes the file as a GET parameter and parses tokens like `%varname%` into database-given ones! Over-complicating FTW!
Chacha102
it's not about overcomplicating. I'm using codeigniter as a framework and I'd love to use the base_url() function in my css to improve portability and reduce typing.If I use relative urls my background images often don't appear when I edit the css using the firefox web developer addon.It's the little things that make a difference..
David Meister
@user278457 Relative paths in CSS shouldn't be an issue, since they're always served from the same directory. Including CSS with every page will actually make it much harder to deal with path issues. Get a decent CSS editor for the editing (CSSEdit for OS X). ;-P
deceze
+4  A: 

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.

MarkR
that seems pretty reasonable to me.So it's not a flat "NO" because of a blatant security issue, it's more of a performance and development issue.Both of those should be weighed up in the context of the project, and I think I can do that based on what you've said :)Thanks!
David Meister
+1  A: 

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.

stillstanding
This is definitely the single biggest issue with what I suggested for the types of projects that I'm working on.Thanks for the heads up! that would have been a pain to debug.
David Meister