<p>The difference is that <code>{% includeJsFile %}</code> can be called in any template or template part and will add the script to the bottom of the page (<a href="https://craftcms.com/docs/templating/includejsfile" rel="nofollow noreferrer">as explained here</a>). </p>

<p>So you could, for example, have a field that requires some JavaScript, say an image slider. You'll only need the JavaScript for that slider, not for the rest of the website, so in the template part where you set up the HTML for the slider, you also include the needed JS with <code>{% includeJsFile %}</code> and it will get added to the bottom of the page. </p>

<p>Where as with just including it in the head will load it on all pages. </p>

<p>It's the same for <code>{% includeCss %}</code>.</p>

CC BY-SA 3.0
2017-07-18T08:19:36.353Z
Ok thanks! Now i got it. Good idea! Strange that my craft CMS was not working anymore when including CSS or JS. Will check that again...
elpeyotl
CC BY-SA 3.0
2017-07-21T09:19:18.743Z
For clarifying. I found out why my live preview was not working when including the js files with {% includeJsFile %}. I need to put siteUrl ~ before the src. like: {% includeJsFile siteUrl ~"assets/js/select-boxes.js" %}
elpeyotl
CC BY-SA 3.0
2017-07-17T05:54:38.937Z
2017-07-17T06:27:41.520Z
2017-07-17T06:27:41.520Z
mrsmn
<p>I go a simple question. I wanted to start with building my craft template from html and changed all css  and  tags to to equivalent <code>{% includeCssFile %}</code> or <code>{% includeJsFile %}</code>. </p>

<p>The page was working but my live preview was broken. It could not load the CSS, JS and other files. So I searched this forum and found out i should use <code>{{ siteUrl }}</code> on my links. I changed all back to   and now live preview is working. </p>

<p>So I'm wondering: why or when should we use this kind of include file tags?</p>

<tags>
Difference between {% includeCssFile %} or including it with <link>
# Difference between {% includeCssFile %} or including it with <link>

(Asked by: username_0 on 2017-07-16)

I go a simple question. I wanted to start with building my craft template from html and changed all css and tags to to equivalent `{% includeCssFile %}` or `{% includeJsFile %}`.

The page was working but my live preview was broken. It could not load the CSS, JS and other files. So I searched this forum and found out i should use `{{ siteUrl }}` on my links. I changed all back to and now live preview is working.

So I'm wondering: why or when should we use this kind of include file tags?

**Tags:** tags

---

## 1 answers

### Answer by username_1 on 2017-07-17. Score: 3 | Accepted answer

The difference is that `{% includeJsFile %}` can be called in any template or template part and will add the script to the bottom of the page ([as explained here](https://craftcms.com/docs/templating/includejsfile)).

So you could, for example, have a field that requires some JavaScript, say an image slider. You'll only need the JavaScript for that slider, not for the rest of the website, so in the template part where you set up the HTML for the slider, you also include the needed JS with `{% includeJsFile %}` and it will get added to the bottom of the page.

Where as with just including it in the head will load it on all pages.

It's the same for `{% includeCss %}`.

> **Comments:**
> **username_0**: Ok thanks! Now i got it. Good idea! Strange that my craft CMS was not working anymore when including CSS or JS. Will check that again...  
> **username_0**: For clarifying. I found out why my live preview was not working when including the js files with {% includeJsFile %}. I need to put siteUrl ~ before the src. like: {% includeJsFile siteUrl ~"assets/js/select-boxes.js" %}  

---

