There are pros and cons to both approaches.
Having multiple CSS files allows you to properly organize and group your CSS files during development. However, this also means that there are several HTTP requests. HTTP requests are more expensive in terms of download time, as it must contact the server and extract the file.
Also, as soon as the file is downloaded, it is cached by the browser. This means that even though it is initially possible to load huge.css slower, it does not need to be loaded again when you navigate the site.
In my experience and adapted by most developers, you can do something like below to get most of these two worlds.
Use css pre-processers as SASS or LESS . Do not ask me which one is better, there are already enough arguments for this topic in this thread. Just choose the one that suits you best. My preference is SASS .
CSS preprocessors let you split your CSS files into smaller, more ordered files. For example, you might have main.sass , which includes menu.sass, footer.sass, etc.
main.sass
include _menu include _footer include _header ...
_ tells sass not to compile separate files for each of these sass files. Thus, all of them will be compiled with only one main.css . These pre-processors have the functionality to compile sass file data into a css file that the browser can read. You can also use tools like [livereload][4] to compile them in real time.
You will have these sass files in your development code. But in your production code, you can just use the compiled single CSS file.
If you feel more profitable and want to accept something else, you can use a tool like Grunt or Gulp . They allow you to automate your development tasks or create processes. Therefore, ideally, you can create a grunt task that will track all your sass files and automatically compiles them into the main.css file. In index.html you can reference this main.css . Once you are happy, you can also have another task called build task , which can automatically compile all your css files and minimize them.
To clarify your question:
It depends on what is best in each case, which site you have and how you built it.
If you have a website where visitors are most likely to never navigate the site, and not with some specific pages, then it’s better to download css specific to that particular page, rather than combining it. You can load these css files into partial parts for this page.
In my experience creating many sites,
- it is almost always possible to download one combined css.
- If a particular page requires css not to be visited frequently, include the page-specific css in your temple separately with a conditional
script tag. - Collapse all css files almost 100% of the time
In addition, I suggest that you spend more time improving the efficiency of your code on the server or database side, and then worry too much about css. It will be more productive since most of the efficiency is on the server side.