A template engine (Velocity, FreeMaker, etc.) lets you, among other things, split up your HTML into re-usable chunks. E.g. you have a <div> showing an ad that appears on lots of places in your site – you can compose a file containing that <div> and its contents once (with Velocity: a ‘myAd.vm’ file), and load it up into whatever page necessary (with Velocity: apply #parse('myAd.vm').
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 #set( $myParam = 'foo' ) just before parsing the ‘myAd.vm’ file, and use that variable inside that file.
My question is: How does the proper way of defining CSS and Javascript in their own files fit in with that?
The ‘myAd.vm’ needs CSS styling, you can define that CSS in that file itself with a <style> tag – which will result in an HTML document with a style tag in its <body> – not in its <head>, and certainly not in a separate file.
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 <LINK REL="StyleSheet" HREF="myAd.css" TYPE="text/css"> 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 #if(someCondition) #parse('myAd.vm') #end) – meaning you don’t actually know in advance whether the head tag should link to that external CSS file.
Any thoughts?
Thanks.
Most frameworks that ive used give you the ability to make some kind of function call that kind of acts as an include for a css or js file, these are then output in the head to external files. In many casses i actually run all these through a minifier so in the end there is only one css and one js file.
This way you can add to the asset stack from within view partials and put stuff directly in the head.