All this time and I'm still debating with myself on this subject. If CSS had some sort of modularisation mechanism of its own it might make things easier — being able to break CSS into sections from within CSS itself to follow how the site itself is divided into sections.
I'll assume that the reason for multiple first-party CSS files is that different sections of a site are differently themed, and that the theming is done using additional CSS files following a site-wide base. (Another way it might be broken up is functionally, with different classes of widget having their own style sheets so that, say, the datepicker looks the same across the site because datepicker.css. If a framework is involved, then it could be injecting CSS
<link>s to do this.)
A couple of benefits of OneFileoRuleThemAll.css:
One request for one file serves to provide styling for the entire session.
When sections of the site are restyled to look more different from/similar to each other, there is less refactoring needed before/after the change.
Less refactoring in general. 'Cos where are you going to move it to?
A couple of problems:
The need include the CSS for parts of the site the user never has any use for (fifty rules for styling comment box widgets when the user isn't logged in and doesn't even get a comment box).
CSS's lack of modularisation: more opportunity to step on each other's work (you can't just tweak this style to make it look right where you are without looking through the rest of the site to make sure it doesn't break things somewhere else).
As for those
style= attributes: what makes that element so different that it has to look different from any other element? And if there are a bunch of elements with that style, why are they all styled the same individually? Couldn't think of a class name or something?
As for the image: