Проблемы с модификаторами БЭМ

Общее
1

Сам БЭМ достаточно удобная методология верстки, но с модификаторами постоянно возникает одна проблема. Она связана с адаптивом.
Допустим у нас есть список карточек, и есть одно большая карточка:
.card {width: 25%;}
.card–big {width: 100%;}
На планшете карточки занимаю больше места
@media (max-width: @tablet-width) {
.card {width: 50%;}
}
Что ломает поведение карточки с модификатором.
Кто-нибудь смог решить данную проблему достаточно удобным образом?

2

Непонятно, что вы имеете ввиду под «ломает поведение карточки». Можете, пожалуйста, подробнее на реальном примере показать?
Какой должна быть ширина модифицированной карточки на планшете, такой же? Почему просто не задать ей нужную ширину и на планшетной версии через модификатор?

3 
<div class="card card--big"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

.card {width: 25%;}
.card--big {width: 100%;}
@media (max-width: @tablet-width) {
.card {width: 50%;}
}

Когда я такое писал я ждал следующее поведение:
большая карточка всегда будет 100%, а маленькие будут менять свой размер. Но так как специфичность у всех селекторов одинаковая медиа запрос просто перебивает свойства большой карточки. Вот я и хотел спросить как в этом случае использовать БЭМ

4

Описать в медиазапросе новое состояние и для модификатора. Можно еще !important использовать, но лучше этого избегать.

5

Получается какая-то сомнительная тема. Дублирование кода. Более удобно будет повышение специфики через селектор .card.card–big. Но и тут есть минусы

6

Сомнительная тема - это повышение специфичности при использовании БЭМ.
Конкретно для модификаторов это нормально, смотрите как на “один брейкпоинт - одно состояние, другой брейкпоинт - другое состояние”.

1 лайк
7

В продолжение.
Если вам нужен действительно “глобальный” модификатор, не зависящий от медиазапросов - объявляйте эти правила после блоков с медиазапросами. Пример:

<div class="box box-2"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: crimson;
}

@media screen and (max-width: 679px) {
  .box {
    background-color: tomato;
  }
}

.box--lightblue {
  background-color: lightblue;
}

Цвет нашего box'а теперь всегда будет lightblue, т.к. переопределяются все вышестоящие правила background-color.

1 лайк
8

Да, наверное это наиболее удачное решение проблемы. Спасибо)