This question is a little related to:
Are unused CSS images downloaded?
Let's say I have a CMS that allows the user to pick how the page looks. Internally the selections are very small CSS files (4-5 lines).
If browsers do not load unused background images, I could safely put all these styles inside the main CSS file, and switch them with a body class. This saves me lots of code that should handle css file switching. Right?
It would always be safe to combine the files. It is considered best practice by today's standards. It is quite common to minify and bundle the js and css files together to reduce requests to the server.
As stated in the post you mention, the browser shouldn't download them until the selector is actually valid, even then the image should only be downloaded one time and should return 304 Not Modified so the browser knows not to download it again.
Anytime you load a css file or change properties on elements, the css is parsed and re-renders the necessary styling.
NOTE: I feel obligated to make sure you take order of selectivity into account when bundling your css files.
