Keeps you organized

Define your JavaScript and CSS source right beneath the HTML skeleton that it's used on:

{% css print %}
  a[href]:after{
    content: " [" attr(href) "] ";
  }
{% endcss %}

{% css screen print %}
  #clickme { font-weight: bold; }
{% endcss %}

{% javascript screen %}
  document.getElementById('clickme').onclick = function() {
    alert('Ugh! I have been clicked');
  }
{% endjavascript %}

<a id='clickme' href="/click/">Click me</a>

Serve your components from one file

(see also rule #1) Using the above example, all your javascript blocks from all your templates would be available concatenated via {{ MEDIA_URL }}screen.js (e.g. http://www.example.com/static/screen.js).

You can arrange your template component blocks in (multiple) groups, to access them by different urls (Here, print.js will contain the concatenated content of the first two blocks).

One can imagine groups for

• printing CSS
• screen CSS
• presentation CSS
• additional CSS and JavaScript for authenticated / paying users
• CSS for browers with enabled or disabled JavaScript
• CSS and JavaScript for mobile devices
• CSS and JavaScript for legacy browsers
• Splitting the initial payload
• Splitting JavaScript in 25K-Slices for the iPhone

Static file generation

While you want your template components be processed on the fly while developing, you can generate static files from your template components upon each deployment:

$ ./manage.py generate_templatecomponents
Generating print.css
Generating screen.css
Generating screen.js

Priority based block dependency

Some CSS Rules and JavaScript might depend on each other (Specific CSS rules override basic CSS Rules; some of your JavaScript depends on your favorite ajax library).

Each block can have a priority, the following example illustrates this:

# template1.html
{% javascript screen 5 %} x = x + 1; {% endjavascript %}

# template2.html
{% javascript screen 10 %} var x = 1; {% endjavascript %}

This would ensure, the javascript block from template2.html appears above the one from template1.html:

/* from 'template2.html' with priority 10 with groups screen */
var x = 1;
/* from 'template1.html' with priority 5 with groups screen */
x = x + 1;

It is recommended to give a high priority for JavaScript libraries, a lower for custom built library code and a very low priority for custom code snippets.

Including external libraries

You can easily include additional static files (like JavaScript libraries, CSS frameworks, ..), by specifying them in your settings.py:

TEMPLATECOMPONENTS_ADDITIONAL = {
    os.path.join(MEDIA_ROOT, 'js/prototype.js'):     'javascript 10 script',
    os.path.join(MEDIA_ROOT, 'js/scriptaculous.js'): 'javascript 9 script',
    os.path.join(MEDIA_ROOT, 'js/effects.js'):       'javascript 8 script',
    # ..
}

This way, you can avoid putting third party code in your templates/ directory and adding django template tags in the first and last line.

Syntax highlighting in vim

To get the syntax highlighting for the (now embedded) css and javascript in vim, create a file at ~/.vim/after/syntax/htmldjango.vim with the following contents:

syn region javaScript start=+{% js+ keepend end=+{% endjs %}+me=s-1 contains=@htmlJavaScript,htmlCssStyleComment,htmlScriptTag,@htmlPreproc
syn region cssStyle start=+{% css+ keepend end=+{% endcss %}+ contains=@htmlCss,htmlTag,htmlEndTag,htmlCssStyleComment,@htmlPreproc