One big css file vs multiple small css files [closed]

Question

I have read different information about this question, and I always see that people suggest using one big css file, from the performance point of view. But I don't understand, won't it take more time to load the css file for all of the pages then to load each one for each page, when it is requested? (examples of what I have seen: Multiple css files or one big css file? and Single huge .css file vs. multiple smaller specific .css files?). Yes, maybe there will be multiple http requests, but they will happen in the different periods of time, so basically isn't it better to load each page when it is needed, then to waste time on loading css for every page in the beginning and then displaying them on the fly?

Answer 1

There is pros and cons of both approaches.

Having multiple CSS files will allow you to organize and group your CSS files properly in development. However, this also means that there are multiple HTTP requests to make. HTTP requests are more expensive in terms of loading time as it has to contact the server and fetch the file.

Also once a file is loaded, it is cached by the browser. Which means, even-though it might be initially slower to load the huge.css, it doesn't need to be loaded again when you navigate around the site.

In my experience and adapted by most of the developers, you could do something like below to get most of the both worlds.

Use css pre-processers like SASS or LESS. Don't ask me which one is better, there is already enough arguments going around the web on that topic. Just pick one which you are comfortable with. My preference is SASS.

CSS pre-processers allows you to divide your CSS files into smaller more organized files. For example, you could have a main.sass which includes menu.sass, footer.sass, etc.

main.sass

include _menu
include _footer
include _header
...

_ tells sass not to compile seperate files for each of these sass files. So they all will only be compiled to a one main.css. These pre-processors come with a functionality to compile the given sass files into a css file that 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 simply use the compiled single css file.

If you are feeling more advantageous and want to take things further, you can use tool like Grunt or Gulp. They allow to automate your development tasks or build processes. So ideally, in development you could have a grunt task that watches all your sass files and automatically compiles them into the main.css file. In your index.html you can have reference to 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 what is best in case by case basis, what kind of site you have and how you have built it.

If you have a website where visitors are most likely to never navigate around the site than some particular pages, then its better to load css specific to that particular page and not combine it. You can load these css files in the partials specific to these page.

In my experience building many many sites,

1. its almost always best to load one combined css.
2. if a particular page requires css is not likely to be visited often, include a page specific css in its templete seperately with a conditional script tag.
3. Minimize all css files almost 100% of time

Also, I will suggest you to spend more time improving efficiency of your server side code or database, then worrying too much about the css. It will be more productive as most of the in-efficiency lies in server side.