7

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?

Improve this question
1
  • 2
    Having multiple CSS files, or at least sections, keeps things tidy and easy to maintain. On the other hand, as already stated in answer below, having 27 CSS files is stupid. I also don't understand how any layout can even need 500+ rules. Commented Sep 6, 2012 at 21:16

3 Answers 3

Reset to default
6

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...

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

+1 just for this line: "having 27 CSS files is just stupid"
Looks like there is a way (and it really is). The guy actually implemented overrides based on previous overrides that resulted from a different order of inclusion. The only way to guess those now is by knowing the order in which the guy wrote the sections. I have no idea how to do this without breaking everything. If 27 css files is stupid then this guy must be nuts
I see nothing in the question that implies all 27 files are included in every page. It may be that there's a common set of styles, and a page (or site subsection) specific set of CSS files, so that only two or 3 are ever loaded on any single page.
4

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.

Improve this answer

2 Comments

@GRIGORE-TURBODISEL, the "technical debt" article is nice, but it doesn't really answer your question... it merely explains the possible reasons you might find yourself in this predicament. I fail to see how it helps anyone figure out how to move forward after the fact.
I don't think having a large number of css files means you have technical debt. If the files are properly organized and commented, and care has been taken to ensure there isn't cross-file contamination, then it may be quite useful. For instance, by separating different forms css into different files, it may be easier to maintain.
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.