So I know generally it is not best practice to have multiple css files placed within the head tag of your site due to the increased number of http requests you would have to make. Therefore it has been recommended to me to just use one big css file instead of smaller ones. However, wouldn't it make sense to break up that css file into separate, smaller files, and then link those individual css files only on the pages where they are needed? So say my homepage had its own set of styles, and my about page obviously will differ from my homepage with it's own set of styles. So why not link a homepage.css file to the html homepage and then only link an about.css file to the html about page? There is still only one http request being made in each case, and you can have much smaller css files. Is there something I'm missing?
-
the css file is cached so if you only load one the user only loads one out of cache on all pages, if he would change to a new page with new css he had to add the new css file to cache instead of load the already cached css file.Sven van den Boogaart– Sven van den Boogaart2015-07-09 17:14:59 +00:00Commented Jul 9, 2015 at 17:14
1 Answer
CSS is cached, so that if you were to link to your big CSS file on your homepage (lets say domain.com/css/homepage.css) then the user travels from your homepage to the about page and it calls the same homepage.css, but you're browser then says "wait! I already have it!" and it skips the HTTP request for the file, resulting in no additional requests.
Where as you have a CSS file for each page, there would be a request for nearly identical CSS files that is wasting bandwidth needlessly. It may not seem like a big deal on smaller sites, but bigger sites with 1000s of requests happening, the extra bandwidth adds up and results in higher operating costs.
The only exception to this is when you're using a responsive framework of some sort (like bootstrap) where editing the main bootstrap file is either impossible (through CDNs) or impractical and hard-to-maintain (i.e. when bootstrap updates you'll lose all your customization), which in this case you would have one bootstrap.min.css file and one custom.css that allows you to keep your customizations while only increasing bandwidth slightly.
