Why one single css file? Shall we bundle it with webpack or keep seperate?

[AdarshJais]

I'm seeking to deepen my understanding of web development practices, particularly regarding the bundling of CSS files. In JavaScript, we often split bundles as code grows to optimize performance. However, when it comes to CSS, I notice that many projects output a single CSS file including pandaCss

1. Can someone explain the rationale behind creating a single CSS file as output in web development? Is it primarily to minimize network calls for improved performance, or are there other factors at play, isn't the big bundle size of CSS is major concern compared to the multiple small bundle fetching, bundle splitting also creates a separation of concern among modules.

2. In the context of Webpack, I understand that CSS is bundled with JavaScript by default. Does this bundling approach have any performance impact compared to having a separate CSS bundle? How does it affect loading and caching strategies? What is the pandaCss recommendation for this?

I'm keen to hear from developers with insights into these considerations and how they impact web development practices.

Thank you!