Media query or split your design into files for each screen?

Question

css

Someone says that it is best to write the whole design in one file in css (I personally hate it so much), someone suggests writing each design separately for different screens.
For example a screen from 1080 to 1920 we make a file: tablet.css
And so on.

My opinion:
I personally don't like to write everything in one file and prefer to break everything into small files for code cleanliness, less spagget code and faster page loading which helps first of all for SEO.

I need your opinion because I may be wrong.

Answer 1

Depends on how the code in different files is related. If some editing in the design affects one file, this is normal. What if there are five files? This is already a heroic overcoming of difficulties created by oneself.
And the acceleration of page loading is not due to the fact that the amount of CSS is reduced, but due to the fact that CSS is cached by the browser and is loaded only on the first visit to the site.
PS And what if I change the width of the browser window on the desktop? How will the system work with a set of files?
PPS Spaghetti code occurs when there are jumps back through the code. In strictly top-down CSS, spaghetti is by definition impossible.

Answer 2

1. Regarding the division into files - you can divide the design into separate blocks, for example, within the framework of the BEM methodology , and collect these files at the assembly stage into one.
2. If we have a division into blocks and, accordingly, into files according to BEM, we can write a media query for a separate block in its own file.
ps And who now generally advises writing everything in one file? The quickest thing was that, on average, it is desirable for a project to include styles in one file, but developing everything in one is not.