When using a template engine like Velocity or FreeMaker, you have the ability to break up your HTML into reusable components. For example, if you have an ad <div> that appears on multiple pages of your site, you can create a file containing that <div> and its contents (in Velocity, this would be a 'myAd.vm' file), and then load it into any necessary page with Velocity's #parse('myAd.vm').
I see these .vm files as similar to functions - they are "invoked" (parsed) and generate textual content. They can also accept "parameters" - in Velocity, you can set a variable like #set( $myParam = 'foo' ) before parsing the 'myAd.vm' file, and then use that variable within the file.
My question is about how to properly define CSS and Javascript in their respective files when working with template engines.
For styling the 'myAd.vm', you could include the CSS directly within the file using a <style> tag. However, this results in the CSS being placed in the <body> of the HTML document, not in the <head>, and certainly not in a separate file.
Alternatively, you could define the required CSS for 'myAd.vm' in a separate 'myAd.css' file and then ensure that any HTML document parsing 'myAd.vm' includes a link to the external stylesheet in its head tag:
<LINK REL="StyleSheet" HREF="myAd.css" TYPE="text/css">Do you have any thoughts on this issue? Thanks.