You need to find a difficult balance . On the one hand, you want your requests to be as low as possible, since HTTP1 does not allow the use of multiple resources in a single request, and HTTP2 is not as widespread as it will be.
On the other hand, there is a parsing speed . On mobile devices, file size. It takes more time to parse (= translate your css to the actual result) compared to the desktop machine.
If you have a large file, say 500kb +, an additional request may be worth it (and if used correctly, the cache will take only one download per cache period). Try to minimize the number of files, for example. do not do one for <320, <680, <768, <1024, etc. etc. Separate two, possibly three files (unless you have good reason for this).
You can also enable it arround . Some developers like to create mobile devices first, and then scale to the size of the desktop. Instead of changing css when decreasing, you use screen and (min-width:1024px) . Then keep your mobile CSS in the main stylesheet and give the browser version a 1024px + file, which is often more efficient, so it will have less effect.
And do not forget about maintainability . You must support the code. If you split everything into files, you won’t make it easy for you. If the solutions you use are minimal, you may need to reconsider, because complex code will have the worst effect in the long run.