Why don't we use one CSS file instead of many CSS files?

Question

Recently I came across a project with 27 different CSS files used by the same theme , and they are intended for certain sections of the application, the rules are divided as follows: there is a CSS file for the menu, there are two more files for contact forms, the other is a footer, formatting a special page, two more for galleries, etc.

So, I asked for arguments for so many CSS files and if it is safe to concatenate.

His answer was that all the files are 126KB in total, bandwidth matters and there are more than 500 CSS rules, so it’s best not to concatenate to prevent selector collisions.

I know that 126 Kbytes of uncompressed CSS files is a lot, but I also know (from the best practice guide) that all these files should be downloaded in one shot, so browsers will cache one biggie and not load them one by one through a browsing session.

Why should I not refrain from gluing all these files together? Is this a big deal?

Answer 1

Due to the way cascading works, there is no way to do harm by simply combining the files together if you save them in the order in which they appeared in the source. This will ensure that subsequent files that override earlier ones do this anyway.

You can then consider minimizing CSS. This will not change the function of the selectors, but compresses them to reduce bandwidth.

All in all, having 27 CSS files is just plain stupid. The user will have to wait until 27 connections are established, requests and orders are completed to view the page. Now it has improved a bit with proper caching, but even so ...

Answer 2

Why should I not refrain from gluing all these files together? Is this a big deal?

If you know that CSS files do not have any conflicting directives and that they must be loaded in the same order for each page of the application, then you should actually combine them into a single file with mini CSS.

But it is simple. As a rule, when you find yourself in this situation, it is very difficult to determine which CSS directives apply to the screen (s).

Emphasis: The situation you are facing indicates technical debt .

Answer 3

Although I agree that 27 CSS files are completely nuts, and that ideally this should be combined and minimized, there are some use cases in which splitting style sheets makes sense.

Consider this: You are working on a sub site that requires a large number of CSS rules that are not otherwise used on the site. If there is no guarantee that the user will visit both the sub-site and the main site (and, therefore, will use caching), it makes sense to store two stylesheets, so the browser does not need to read a huge stylesheet to see if something matches the HTML document.

Now this is not an ordinary case, but it is happening. An example is a large corporation with a large number of divisions with their own sites. They can include one style sheet for all their common styles (corporate specific interface, etc.) and separate style sheets for layouts and overrides.

However, I highly doubt that 27 styles have always made sense. The original author probably didn't have a clue, and he thought he was more structured that way. Modulated CSS is actually pretty neat, but it should always be combined and minimized before it reaches the client. This is a general method of working in SASS . You will have many partial style sheets for specific parts or functions of the site, but as soon as you press Ctrl + S , it will automatically be combined into one neat little package.

Now you could figure out in what order the CSS files are loaded on your site by simply visiting each page and noting the order. It will be a tedious job, and there is no guarantee that it will ever really pay off, but it can be done.