Single huge css file vs. multiple smaller css files
Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in D:\Hosting\3681091\html\blog\wp-content\plugins\digg-digg\dd.class.php on line 759
Warning: file_get_contents(http://feeds.delicious.com/v2/json/urlinfo/data?url=http%3A%2F%2Fwww.devtheweb.net%2Fblog%2F2010%2F03%2F07%2Fsingle-huge-css-file-vs-multiple-smaller-css-files%2F) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in D:\Hosting\3681091\html\blog\wp-content\plugins\digg-digg\dd.class.php on line 759
In my websites, I usually use a single css file for all css code in the site. Today I though more is it correct to be done instead of adding multiple, but smaller css files, here’s what I found:
1. When you have multiple css files, when a page is loading there’ll be multiple HTTP requests (for every css file), so it will slow down the loading of the web page.
2. If you have a single huge css file it’s hard to find something and make changes in the code.
I think the best solution is:
1. I have a single css file with many comments
2. Before uploading the css file to the server, I remove the comments and all unnecessary code from the file using my reduce code size tool and into the server, I upload the optimized css file.
In this way, I have a file that allows me to make changes easily and in the same time the loading speed of my site is fast, because there’s only one HTTP request for the css.
One Comments to “Single huge css file vs. multiple smaller css files”
The only time I use multiple files is to either overwrite the values of a first (for example I have a site that contains subsites; the structure is pretty much the same in both but elements with the same name contain subtle colour changes / different images in the sub-sites) or to differentiate between the structure and colour (if a designer is working on the styles but the structure won’t change).