Grouping media queries breaks the responsiveness of a BEM element?

Question

Sass

I write media not separately at the end of the document, but in each class (where it is needed) + I use BEM
This type of constructions are obtained

// блок карточки товаров
.contain
   display: flex
   flex-wrap: wrap
   &__card
      width: 100% / 6
      @media (max-width: 62.5em)
         width: 100% / 3
      &_big
         width: 100%

The problem is that in css you get a lot of media scattered throughout the file.
I decided to include a plugin that groups all media at the end of the document.
There was a problem, on media (max-width: 62.5em) css of the card element with the big modifier
are crossed out by the card element without the modifier and the adaptive breaks

.contain {
   display: flex;
   flex-wrap: wrap; 
}
.contain__card {
   width: 100% / 6; 
}
.contain__card_big {
   width: 100%; 
}
       
@media (max-width: 62.5em) {
   .contain__card {
      width: 100% / 3; 
   } 
}

Is it worth abandoning such a plugin and is it normal to store a lot of media scattered throughout the file in css?
Or is there a way to write media in such a way that it works?

Answer 1

The adaptive breaks because all these plugins group and write media at the end of your file, thereby interrupting all modifiers.
There is no correct way, but I prefer to define one rule for a single selector first, and place the definitions of any changes to that rule (for example, changes inside media queries) immediately after it. This way, I don't have to search through separate blocks of code to find a declaration related to a particular selector.
It would seem quite reasonable to oppose the aforementioned technology because of its verbosity. Is the file size alone a good enough reason not to write media queries this way? After all, no one wants to have a bloated CSS file to serve their needs. But you need to reckon with the simple fact that gzip compression, which must be subjected to all possible resources on your server, reduces the difference to completely negligible amounts.
Here's another, read: https://benfrain.com/inline-or-combined-media-quer...