2

Should I put .js in front of .css, or .css in front of .js files? Which is better? I'm working on a html5 project with jquery.

xhlwill
  • 399
  • 1
  • 5
  • 20
  • Some people believe it's better to include CSS files before javascript. Benchmark show that currently there's no much difference. Here is an interesting discussion with some benchmarks: http://stackoverflow.com/questions/9271276/is-the-recommendation-to-include-css-before-javascript-invalid – Paweł Bulwan Jul 17 '12 at 04:47
  • 1
    This post will help you much http://stackoverflow.com/questions/9271276/is-the-recommendation-to-include-css-before-javascript-invalid – loler Jul 17 '12 at 04:49

4 Answers4

1

A general rule is to put stylesheets (.css) at the top and scripts (.js) at the bottom. But be careful, you might not be able to put all your scripts at the bottom.

c0deNinja
  • 3,956
  • 1
  • 29
  • 45
0

Try using http://headjs.com/ which will optimize loading of JS and CSS. http://requirejs.org/ is also a good framework for handling this.

Danny G
  • 3,660
  • 4
  • 38
  • 50
0

I'd suggest you use the HTML5 Boilerplate which makes decisions like this for you based on best practices formulated by top front-end developers over the last 4 years. The code is really well commented and the documentation is excellent so you can easily learn more about the thinking which informed the various decisions, but if you just want to get on with building your page, safe in the knowledge that your foundation is sound, you can.

net.uk.sweet
  • 12,444
  • 2
  • 24
  • 42
-1

There is no better way. As long as they are all in the header there is no difference in their order unless they depend on each other.

EDIT: The above is true in most simple cases.

Ideally, you should put all of your CSS styles in the HEAD element and all of your SCRIPT elements in the order of dependence at the end of the BODY element (directly before the ending </body>).

Different orders can make some difference in newer desktop browsers. In mobile browsers, speculative parsing is not available, so the browser waits for requests of scripts before any other loading is performed.

tl;dr - It doesn't really matter as the differences are trivial, especially if your frontend has heavy JavaScript dependence.

PitaJ
  • 12,969
  • 6
  • 36
  • 55