Группировка медиа запросов ломает адаптив БЭМ элемента?

Question

[Andrei Popov]

Я прописываю media не отдельно в конце документа, а в каждом классе (где это нужно) + использую БЭМ
Получаются конструкции такого типа

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

Проблема в том что в css получается очень много media разбросанных по всему файлу.
Я решил подключить плагин который группирует все media в конце документа.
Появилась проблемма, на media (max-width: 62.5em) css елемента card с модификатором big
перечеркиваются элементом card без модификатора и адаптив ломается

.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; 
   } 
}

Стоит ли отказаться от такого плагина и нормально ли хранить в css много media разбросанных по всему файлу?
Или есть способ писать media таким образом так чтобы это работало?

Answer 1

[Александр Присяжнюк]

Адаптив ломается потому что все эти плагины группируют и записывают media в конце вашего файла тем самым перебивая все модификаторы.

Правильного способа не существует, но я предпочитаю сначала определить одно правило для отдельного селектора и располагать определения любых изменений этого правила (например, изменения внутри медиазапросов) непосредственно после него. При этом мне не придется искать отдельные блоки кода, чтобы найти объявление, относящееся к конкретному селектору.

Казалось бы, вполне резонно выступить против вышеупомянутой технологии по причине ее многословия. Неужели один лишь размер файла может стать достаточной причиной для того, чтобы не записывать медиазапросы таким образом? В конце концов, никому не хочется иметь раздутый CSS-файл для обслуживания своих потребностей. Но нужно считаться с тем простым фактом, что gzip-сжатие, которому должны подвергаться все возможные ресурсы на вашем сервере, сокращает разницу до совершенно ничтожных величин.

Вот еще, почитайте : https://benfrain.com/inline-or-combined-media-quer...

Comments

[Andrei Popov]

Спасибо! Решил стоит отказаться от группировки медиа запросов)