In the past
I used to think about CSS stylesheets as stylesheets that might contain the styles for an entire website, including every layout, every 'component', and all of the base styles like what color a link is or the font used for the text.
In the present
For the past ~10 years, responsive web design has become important and the nature of what gets put inside a CSS stylesheet has changed. I think it makes a lot of sense to split apart the structural page layout styles from the styles for the individual components that go into them - especially if the components use element queries for their breakpoints. By having all of one component's styles (including responsive breakpoints) grouped together in a way that can be copy/paste into other websites we can make the parts and pieces of our layout very modular and portable, while keeping our layouts simple to work with as well.
In the future
As websites get larger and more dynamic, the CSS stylesheets you have will get less and less important, and being able to generate the CSS you need to style the elements you have at any given moment will become more important. In the future we may only need 1 CSS stylesheet containing just enough styles to get you to "first paint" and displaying the website, and from there JavaScript may be used to template and generate the CSS you need. This also reduces the total overall CSS that has to be parsed and exist in CSSOM at any given time as well. In this situation, though we're still outputting CSS to actually get the styles onto the elements, because we're using JavaScript to help us that means how and where we express those styles doesn't necessarily need to look like a CSS stylesheet, it can be any way we chose to express those design intentions and styling.