What is the best way to organize the structure of media queries and styles?

Question

HTML

Hello.
I saw a project with a good structure, each page had its own media queries and folder, and for each screen size its own file, for example: 992, 768, 480, 320 for homepage, etc. Personally, I make a media query with a mixin and mix everything together with the usual scss (in my case) code, but since my style base has become very huge, I'm already confused in it where what request was made, it's interesting to know how you organize your code :)

Answer 1

I don't like to look for 4 places in one file where styles are defined for the same block, so I do everything side by side.

.some-block {
  width: 1000px;
  @include desktop {
    width: 100px;
  }
  @include tablet {
    width: 10px;
  }
  @include mobile {
    width: 0px;
  }
}

Answer 2

There was no confusion, at the end of each file I make media queries

.card {
  .image {}
  .link {}
  .description {}
}

@include respond-to('md') {
  .card {
    .image {}
  }
}

@include respond-to('xs') {
  .card {
    .link {}
  }
}

Answer 3

Spread across files and connect via link with the media attribute. Save on the request size and the browser will only load the styles you need

Answer 4

I prefer to group styles by meaning and in relation to one block, rather than in relation to screen size.
Dividing sizes by files, and even more so by folders, seems logical only at first glance. In fact, this is done by the victims of formalism to the detriment of common sense.
Well, I opened one of the files, I look at the block code. How am I supposed to guess how it will behave when the screen is reduced? Climb to another file? And then on the third, fourth ... Or maybe there is nothing there - I don’t know in advance. And another part of the styles is always common for different sizes - are they also in a separate file?
It's better to break the interface into smaller blocks and make them as independent as possible. But inside the block, let the code be in one file and next to it. Yes, media queries are not completely optimal, yes, the amount of code is a little more, but I don’t care.