title: Maintaining proper CSS \ Javascript and using a Template Engine - a contradiction?
body: <p>A template engine (Velocity, FreeMaker, etc.) lets you, among other things, split up your HTML into re-usable chunks. E.g. you have a <code>&lt;div&gt;</code> showing an ad that appears on lots of places in your site - you can compose a file containing that <code>&lt;div&gt;</code> and its contents once (with Velocity: a 'myAd.vm' file), and load it up into whatever page necessary (with Velocity: apply <code>#parse('myAd.vm')</code>.</p>
  
  <p>I like to think of these .vm files as functions, they get "invoked" (parsed) and spit out textual content. They can have "parameters" - in Velocity you can <code>#set( $myParam = 'foo' )</code> just before parsing the 'myAd.vm' file, and use that variable inside that file.</p>
  
  <p>My question is: How does the proper way of defining CSS and Javascript in their own files fit in with that?</p>
  
  <p>The 'myAd.vm' needs CSS styling, you can define that CSS in that file itself with a <code>&lt;style&gt;</code> tag - which will result in an HTML document with a style tag in its <code>&lt;body&gt;</code> - not in its <code>&lt;head&gt;</code>, and certainly not in a separate file.</p>
  
  <p>Or, you could define the CSS that 'myAd.vm' needs in a separate 'myAd.css' file, and demand that whatever HTML document that parses 'myAd.vm' will have a <code>&lt;LINK REL="StyleSheet" HREF="myAd.css" TYPE="text/css"&gt;</code> in its head tag. This is a problem since it makes things more complex and cumbersome, and - you may want to actually parse the 'myAd.vm' file depending on a conditional (in Velocity, for example, you could have <code>#if(someCondition) #parse('myAd.vm') #end</code>) - meaning you don't actually know in advance whether the head tag should link to that external CSS file.</p>
  
  <p>Any thoughts?
  Thanks.</p>