What is best suited for handling javascript and css files

Question

How do you manage all your .js and .css files in an asp.net project. Especially when they have a lot of interdependence?

I combined all the script in one. But it becomes compelling, and 90% of them were not used on specific pages. What I want is a tool or guide to manage all of these scenarios, simple dependency management that helps to include on the page only the JS and CSS that are needed on this page.

The ScriptManager nut is also used, when you use many controls, this is very convenient ... maybe I am using it incorrectly.

Answer 1

I prefer to share my JS files based on their function - for example, I can have one JS file for all AJAX-based interactions, one for all validations and a common JS library for all functions that are common to the entire network expression. Having one file that combines all of the JS scripts into one will definitely slow down the application because each page will load the entire file, although only a small part can be relevant.

For CSS files, I prefer to have one common stylesheet that will contain the common styles available for the entire application. I could also create separate CSS files for pages with a very specific layout structure.

I don’t know any tools that could handle this dependency automatically, but when you divide files according to function, it becomes unnecessary in most cases.

Answer 2

In our projects, we mark scripts and CSS as resources for the class, and then register them during the page life cycle, usually in PreRender ().

For instance:

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

Then we set the properties of each of our scripts and css files as embedded resources.

This approach allows you to keep your scripts separate and target individual user interface components. You can register the same resources for several classes, and then ScriptManager will make sure that the necessary resources appear on the page.

Then we wrote a class at the HTTP handler level that handles the compression of all CSS resources into a single file before it exits the stream to make sure that we are not in the 32-bit CSS limit for IE6. It also removes spaces, comments, etc. From our scripts to optimize javascript output.

Answer 3

This is how I usually do it:

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

Javascript: what I did was taken as ASP.NET idea code and applied it to my JS files in terms of naming. Example: A JS file with specific pages for home.aspx is called home.aspx.js. Then I will have separate JS files based on the plugin or functionality and, possibly, common.js, which will contain all the global vars.

It may not be all cups of tea, but I hope this gives you some ideas!

Answer 4

I share JS files by its functionality.

The most common features that are used almost everywhere relate to a single file,

Other classes and methods go to their own files.

For Css, I have one shared file for the whole site.

If I have sections that are visually different from the others, I split the css files into each section. I also have a tab div control, it has a separate css file. I do not mix files.

For components, deployment resources look good, but sometimes it can be useful to fix errors when deploying JS files.