Import in CSS

I have only been a programmer for a few years and I my heart really is in web development and the exciting world of mobile development. I was working through CSS and discovered the @Import tag. I thought this was great to keep separate the CSS for individual pages. I had likened it to the “import” function in the C language. Mistakenly thinking that these files are all compiled together again taking on the attitude in the C language. So as a best practice I decided to use this tag and concept on a few of the projects that I am working on as well as convert some of my existing projects into this standard.

The idea is to have one main Site.css page that has all of the @Import tags for each of the pages that I have created. To me it just made sense. Then in the HTML code there is only one tag. Something I hated was having several “link” tags to multiple files. This just seems to clutter up the HTML file and in trying to separate out things that are only important to particular pages.

After looking around I found that this is not a good thing to do. Using the @Import tag causes multiple trips to the server for each file and it is even worse for Javascript files. When the request is made to the web server it begins sending the files. Each time the client hits an @Import tag it sends the request for the additional files. Not really all that bad, except that this slows things down a bit for the client. All these extra trips to the server add up. Similar to the picking up a penny. At the time it doesn’t seem like that big of a deal. But do it a hundred times and you’ve picked up a dollar. Do it a thousand times and you have picked up ten dollars. You see where this is going. It gets even worse for Javascript files. While some of the CSS files may download concurrently Javascript causes everything to stop until the file is completely downloaded. So let’s say that you have only three Javascript files. Each time the client hits this link and needs to download the js file everything else stops. This happens three times.

The simple solution; Combine the files into one. Create one Javascript file, and only one CSS file. This will do two things. One it will reduce the amount of trips to the server looking for additional files and two subsequent pages will be faster because the files that are needed will already be there. One side benefit, less bandwidth on your web sever. So learn from my mistake put it all into one file. You can develop them in separate files, but when you are deploying to the wild combine them. If you want to squeeze that last little bit of speed out you can also minify the files to remove any white space and compress the file down as small as possible. But that is for another post.