Organizing CSS and Javascript in a single template multiproject site.

Question

Let's start with a bit of context. What do I have in my hands?

• Multiple web applications (All .NET: WebForms and MVC)
• Common UI template
• Each application has also it's own UI elements.
• Multiple files for css/javascript. Some common to all applications, some specific to the application.
• Tenths of files per page = multiple requests per page = slow.

Question: Do you have any ideas or comments on my ideas to achieve the following Goals?

• Reduce the number of requests to the minimum.
• Minify css and javascript.
• Use a CDN to distribute them.
• Have a life and be able to manage the UI area.

Idea 1

Centralize the UI in a project. Every UI widget will be there with a sample (that can be tested later).

I can "build" the ui: minify, group, publish to a global known place. Applications can link to these global files and use the UI elements.

This will force a bit of discipline when doing the UI. It won't be a "hack some CSS and you're done". And after 3 months everything is full of hacks and you don't know where to start when fixing something.

The bad: you work on an application but the UI part you have to work it first in another project. Go there, create your widgets, and then use them in your app.

Idea 2

Forget the idea of the CDN and use some dynamic .NET minifier/packer. I will share the basic UI parts and every application will generate dynamically the packages they need in runtime.

The bad: No CDN, dynamically generate something that you know is static, no centralized place for the UI (you have a common base, but nothing else).

Answer 1

We do something similar by using externals in SVN. I.e. have a master copy centrally (separate project would be sensible) and then use SVN externals to get updated and distributed to all locations that need it.

If you used version numbers you could also achieve you CDN and also get around any release issues where some sites are released at different stages.

I guess you may not be using SVN but just an idea. Minifying can be done with the YUI compressor, plenty of information on that in the wild.