Use multiple external stylesheets or as few as possible? pros and cons

I've been searching for CSS best practices, pondering what best practices my code supports, and I'm reading something that is really against pretty much everything I've learned, but it comes from Google. I always prefer to use multiple stylesheets. I find it better to maintain the code and also my code does not load multiple CSS classes that will not be used.

Google developer directs us to the exact opposite:

Combining external stylesheets into as few files as possible reduces RTT response times and latency when loading other resources.

Here are some rules of thumb for bundling your CSS files into production, which they also recommend:

• Divide the CSS into 2 files each: one CSS file containing the minimum code needed to render the page at startup; and one CSS file containing code that is not needed until the page has finished loading.
• Serve the CSS of a rarely visited component in its own file. Serve the file only when the user requests this component.
• For CSS that shouldn't be cached, consider nesting them.
• Don't use CSS @import from CSS file.

Indeed ... Google recommends inline css when css won't be cached? or use less css files as possible? (of course we don't have to use css for every thing, but we always read experimenter web designers recommending using multiple stylesheets, so I'm really confused (if it didn't come from google I would ignore it, but how is it I thought about asking the opinion of stackoverflow users because I think it might be helpful for others as well).

PS: Here you can find the address of the information I posted .