Why are we not using one CSS file instead of many CSS files?

Question

I recently stumbled across a project that has 27 different CSS files used by the same theme, and they are for specific sections in the application, rules split like this: there's a CSS file for the menubar, there's two more files for contact forms, another one does the footer, specific-page formatting, two more for galleries, so on.

So I asked lead what's the reasoning for so many CSS files and if it's safe to concatenate.

His reply was that all files sum 126KB, bandwidth matters and there's 500+ CSS rules, so best not concatenate to prevent selector collisions.

I know that 126KB of uncompressed CSS files is an awful lot, but I also know (from the best practices guide) that all these files should be downloaded single shot, so browsers will cache one biggie instead of downloading them one by one across the browsing session.

Why should I not keep myself from gluing all these files together? Is it a big deal?

Answer 1

Due to how cascading works, there is no possible way to cause harm just by concatenating the files together, provided you keep them in the order they appeared in the source. This will ensure that later files overriding earlier ones will still do so.

Then, you can consider minifying the CSS. This won't change the function of the selectors, but will compress them to reduce bandwidth.

All in all, having 27 CSS files is just stupid. The user would have to wait for 27 connections to be established, requests to be made, and downloads to be completed, just to see the page. Now, this does improve somewhat with proper cacheing, but even so...

Answer 2

Why should I not keep myself from gluing all these files together? Is it a big deal?

If you know that the CSS files do not have any conflicting directives and that they should be loaded in the same order for each page in the application, then you should, in fact, bundle them into one minified CSS file.

But that's just it. Typically when you find yourself in this situation, it's extremely difficult to discern which CSS directives are applied to which screen(s).

Emphasis: The situation that you are facing indicates technical debt.

Answer 3

While I agree that 27 CSS files is utterly nuts, and that ideally it should be merged and minified, there are some use cases where dividing stylesheets make sense.

Consider this: You are working on a subsite, which 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 take advantage of caching), it makes sense to keep two stylesheets, so the browser doesn't have to read through a huge stylesheet to see if anything matches the HTML document.

Now, this is no common case, but it does happen. An example would be a large corporation, with a lot of subdivisions with their own sites. They might include one stylesheet for all their shared styles (corporate specific UI and so on) and separate stylesheets for layouts and overrides.

That said, I very much doubt that 27 stylesheets would ever make sense. The original author probably didn't have a clue, and thought it was more structured that way. Modularized CSS is actually pretty neat, but it should always be merged and minified before it reaches the client. This is the common work method in SASS. You will have a lot of partial stylesheets for specific parts or functions of the site, but as soon as you hit Ctrl+S, it's automagically merged into one neat little package.

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