Multiple JavaScript/CSS Files: Best Practices

Multiple javascript/css files: best practices?

I would suggest using PHP Minify, which lets you create a single HTTP request for a group of JS or CSS files. Minify also handles GZipping, Compression, and HTTP Headers for client side caching.

Edit: Minify will also allow you to setup the request so that for different pages you can include different files. For example a core set of JS files along with custom JS code on certain pages or just the core JS files on other pages.

While in development include all the files as you normally would and then when you get closer to switching to production run minify and join all the CSS and JS files into a single HTTP request. It's really easy to setup and get working with.

Also yes, CSS files should be set in the head, and JS files served at the bottom, since JS files can write to your page and can cause massive time-out issues.

Here's how you should include your JS files:

</div> <!-- Closing Footer Div -->
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
</body>
</html>

Edit: You can also use Cuzillion to see how your page should be set up.

What is the best practice to consolidate multiple Javascript files?

You might want to check out Closure Compiler (which is a Google product).

You would probably want the Closure Compiler Application form of the product.

A sample workflow would probably look like:

Create a list of your JS files and paths
Run the command to compile and concatenate files (java --jar compiler.js --js path_to_file1.js --js path_to_file2.js (etc.) compiled.js)

Closure Compiler also has a related project, Closure Stylesheets, that does the same thing for stylesheets.

This approach, of course means that there's a pre-compilation step. Depending on your backend, there also exist libraries that do the compilation when the page is built. For example, for JSP, there's Granule a tag library that creates the compiled JS and CSS files at page build.

There's a third possibility: modularization. Since you gave the example of being able to import CSS files in SASS, an analogue for JavaScript is using a module library, using either the CommonJS standard, or (the one I prefer), the AMD (asynchronous module definition) pattern, which I have personally used with RequireJS. RequireJS also comes with a nice optimizing tool that will bundle up (minify, compress, concat etc) all the required files for your application

UPDATE

Since you mentioned that you are using Django in the comments (might be useful to update the question with this info too), see if this answer helps too

What is the best practice to include js/css files in an enterprise application framework?

You need to think about reducing your download size first:

putting all your js and css into as few files as possible. This is because a client can only open ~~2 HTTP channels~~ (most browsers now support more, info here) at any one time, all file downloads after this are queued until the previous ones finish downloading.
minify your js and css.

Once you've got this down to a reasonable size then you can think about the above. You want to download, the smallest amount of content upfront, so in the master. This will improve performance because then the client can cache it. Caching is a good thing, this stops the client having to request the js and css every time they visit a page on your site.

You might also want to think about applying HTTP expiry headers.

Yahoo do a good site on lots of these ideas: http://developer.yahoo.com/performance/rules.html

Also don't put your js in the viewbag. This is unnecessary overhead and load on the server. Just add a reference in your pages!

MVC4 now supports bundling

What is best practice to handle javascript and css files

I prefer to divide my JS files based on their function - for instance, I could have a single JS file for all AJAX based interaction, one for all Validations and a common JS library for all functions that are common to the entire web application. Having a single file that combines the entire JS scripts into one would definitely slow down the application because each page would load the entire file, even though only a small portion might be relevant.

For CSS files, I prefer to have a single common stylesheet that would contain the general styles available to the entire application. I might also create individual CSS files for pages that have a very specific layout structure.

I don't know of any tools that could handle this dependency automatically, but When you divide your files according to function, this becomes unnecessary in most cases.

When Should I Combine my JS and CSS Files?

To be honest, it depends.
People are often, wrongly, obsessed with merge-min... That's not always the case. The need for merge-min depends on a few things:
Sometimes it's faster and BETTER practice to load 2 css files than one big one? Why? Because they'll load in parallel. That simple.

So don't go with the merge-min obsession. If your users are returning, daily users, do merge and rely on browser cache. If not, optimise parallel loads by not merging.

And ignore the simplistic: 'yes you must merge because that's what was best 10 years ago and I've never questioned it' :)

What are the best practices for including CSS and JavaScript in a page?

Best practice would be to split each resources(scripts, CSS, images, etc.) into separate files. Which will allow browser to download and cache each resource for future reuse(even for other pages). But browsers have limit into six(on time of writing) parallel connections per one origin. That why a lot of external resources on page cause bad page loading performance and bad waterfall.

There are a lot of techniques to improve performance such as: bundling, domain sharding, image sprites etc. Also for some critical resources you can use inline technique. It allows browsers to use this resources instantly without additional requests. For example, you can embed all resources(image, CSS, scripts) that are required for loading indicator and browser will render it without additional requests.

For best development style do not embed resources and use separate files. In case you care about performance you should investigate waterfall of your page(e.g. here or network tab in developer tool of any browser) and use some techniques to improve it. If you are interested in this field I recommend you to read books below:

High Performance Web Sites by Steve Souders
Even Faster Web Sites by Steve Souders
High Performance Browser Networking by Ilya Grigorik

Note that this techniques are relevant only for HTTP 1.1. For HTTP 2.0 it will be only harmful because new version is designed to improve performance.

css best practices - combining all css into a single stylesheet?

You should combine all your CSS into one file to reduce the amount of requests made to your server.

A similar topic is sprite sheets, the combination of multiple images into one large image to also reduce the amount of requests made to your server.

You'll find that loading 100x 5kb files is a lot slower than loading a single 500kb file.

When you're ready to upload your files to a live environment, you should also consider compressing your CSS and JavaScript files. There are a vast amount of online tools for this, eg:

CSS Compressor.
JavaScript Compressor.
HTML Compressor.

Combine and Minify Multiple CSS / JS Files

I ended up using CodeKit to concatenate my CSS and JS files. The feature that I find really useful is the ability to do the concatenation upon file save; because it monitors the respective CSS / JS assets. Once I got them properly combined e.g. to 1 CSS and 1 JS files, all other files simply can refer to these 2.

You can even ask CodeKit to do on-the-fly minification / compression.

Disclaimer: I am not affiliated in any way with CodeKit. I randomly found it on the web and it has served as a great tool in my development process. It also comes with good updates since I first used it more than a year ago.

Multiple JavaScript/CSS Files: Best Practices