What is best practice to handle javascript and css files

Question

How do You manage all of Your .js and .css files in ASP.NET project? Especially when they have a lot of dependency between each other?

I've combined all script in one. But it's become weighty, and 90% of them were not used on particular pages. What I want is an instrument or guidance to manage all of those scripts, simple dependency management, that help to include on page only those JS and CSS that needed on this page.

Also used ScriptManager nut when You use a lot of controls it's very handy.... maybe I'm using it in the wrong way.

Answer 1

On our projects, we tag the scripts and the CSS as resources for the class, and then register them during the page lifecycle, usually in PreRender().

For example:

// Css
[assembly: WebResource("Assembly.Class.MyClass.css", "text/css")]
// Javascript
[assembly: WebResource("Assembly.Class.MyClass.js", "text/javascript")]
namespace OurNamespace
{
   public class MyClass...

We then set the properties of each of our scripts and css files to be Embedded Resources.

This approach lets you keep your scripts seperate and targeted to individual UI components. You can register the same resources to multiple classes, and then ScriptManager will take care of making sure that the right resources show up on the page.

We then wrote a class at the HTTP handler level that handles compressing all the CSS resources into one file before it's streamed out, to make sure we didn't hit the 32 CSS file limit for IE6. It also strips out whitespace, comments, etc. from our scripts to optimize the javascript output.

Answer 2

This is how I do it usually:

CSS: 5 files initially. reset.css (from YUI), structure.css, general.css (borders, backgrounds, z-index etc), typography.css and base.css which imports the 4 other css files.

Javascript: What I have done is taken the code behind idea of ASP.NET and applied it to my JS files in terms of naming. Example: page specific JS file for home.aspx is called home.aspx.js. Then I'll have separate JS files based on plugin or functionality and probably a common.js which will contain all the global vars.

This may not be everyone's cup of tea, but I hope that gives you some ideas!

Answer 3

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.

Answer 4

I divide JS files by its functionality.

Most common functions that used almost everywhere go to one file,

Other classes and methods go to their own files.

For CSS, I have one common file for the whole site.

If I have sections that are visually different than others, I separate CSS files to per section. Also, I have a tabbed div control, it has a separate CSS file. I do not mix the files.

For components, embedding resources look good, but sometimes it's good to fix bugs with only deploying JS files.