Introduction

When you use multiple CSS files in project, for each CSS file it makes extra HTTP request to server. Even though you use ASP.NET theme, it breaks out into multiple CSS files. Also, if you minimize the size of CSS files, then your page will load faster.

Background

In development time, you might want to organize CSS into multiple files and with proper whitespace and comments. But you should keep in mind that Internet Explorer 6, 7 do not support more than 31 CSS files in a single page. In case of deployment, you can combine multiple CSS files into a single CSS file and also minimize size of file using minifier like YUI compressor for loading your page faster. Here I have given a way to combine multiple CSS files and also minify CSS and JavaScript files.

Implementation

If you use ASP.NET theme, then there would not be any direct reference of CSS link in your page. So combining multiple CSS files into a single file does not affect application wide. You can combine multiple JavaScript files into one using composite script references in the Script Manager Combining Client Scripts into a Composite Script. Here, I will discuss only deployment time process which will help to load your page faster. So, I only minify JavaScript files using Nant.

For automating all these processes, I used NAnt tool. Combining multiple files into one file is easy in NAnt using Nant tasks. Also for minifying CSS and JavaScript files, I used YUI compressor.

First, I discuss process steps before going to an example:

Combine all CSS files into one files. NAnt gives you an easy way to do this using Nant concat task.

In this article, I am using the same script and will describe about scripts which combine CSS files and minify JavaScipts and CSS files.

I have given a code block which combines multiple CSS files into a single style.css file and deletes other CSS files from Theme folder.

Multiple files can be concatenated using Nant concat task which is found after loading Nant contrib.Task.dll and for that, you need to have NAnt contrib DLL registered or you can add <loadtasks assembly="${NAntContrib}\NAnt.Contrib.Tasks.dll" /> before calling <concat> task.

In theme folder, I had seven CSS files. You can see CSS files in CssFileLocation folder is concatenated into a single style.css file, but here I have also excluded default.css file. You might have a CSS file that will be loaded dynamically and have alternate style which style.css contains. So I have excluded default.css file in my project. After this operation, I have only two CSS files under CssFileLocation which are style.css and default.css.

For minimizing the size of CSS files and JavaScipts files, I used YUI compressor, the article YUI Compressor and NAnt nice scripts file for minifying CSS and JavaScripts and I also took help from that code. Here is my code:

But the problem is I had 7 CSS files under CssFileLocation folder which is the location of Theme folder. I have removed 6 CSS files - expect default.css in my 'css' target but these files still have references in my web project file with <Content include="App_theme\Base\xxx.css"\> tag. So after the above operations, it will give error when you create setup as content files are missing in your source project. So before you build your solution, you have to remove the references of those removed CSS files. I have used C# code for removing those references in WebProject.cproj.

This code first finds all references of CSS files in web project and then removes these references and also adds new style.css reference.

So after all these operations you have only two minified CSS files in which style.css file is a combination of 6 CSS files in your project. So now, you have only two HTTP requests to server whereas before it was seven HTTP requests. Also JavaScript codes are minified.

Point of Interest

The advantage of this process is that you are maintaining separate CSS files according to your module and also JavaScript, CSS files are readable with proper alignment as spaces. And only creating build of solution using automated build minifying and combining CSS and JavaScripts. So it does not hamper your CSS and JavaScript organization.

Share

About the Author

I am now working as software engineer in Malaysia. I am from Bangladesh and I have completed my B.Sc (Engg.) in CSE from Rajshahi University of Engineering and Technology (RUET).I spend much time in learning latest technology.