views:

240

answers:

4

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 guidence 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 wrong way.

+2  A: 

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.

womp
A: 

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.

Cerebrus
And what to do if You using for example several plugins for jQuery?
AlfeG
Performance-wise, it's much better to have a single JS file. The browser will cache the file on first load, so size is somewhat immaterial. You're slowing down your app more by separating the files because each file needs a client/server round trip that is usually just going to get a HTTP 304.
Bryan
Yes I understand this. But sometimes those files become very big... Anyway thanks for answers. I will mark right answer lately this day.
AlfeG
@Bryan: Thanks for the downvote! If size *were* immaterial, JS minification wouldn't be an established process. Additionally, you are assuming that everyone wants to cache their scripts. No, I don't agree at all that the app would slow down by dividing files. Check any mature JS library for pointers
Cerebrus
+1  A: 

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!

Darko Z
I like this method. On a previous project I worked on we also went a step further and implemented a Page class that automatically emits the "script behind" for each page.
Bryan
5 CSS files? External JS for every page (that uses it)? That's a hell of a lot of HTTP requests, no?
Ty
Yes it is Ty, however this is just for dev. we have a build process that minifies/compresses js and css, into 1 file each for deployment
Darko Z
A: 

I divide JS files by it's functionality.

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

Other classes and methods goes to their own files.

For Css, I have one common file for whole site.

If I have sections that is visually different that others, I seperate 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 is looks good, but sometimes it's good to fix bugs with only deploying JS files.

Canavar