@Barring

Когда в БЭМ использовать миксы, а когда модификаторы?

У меня есть такая базовая карточка :
<div class="card">
      <img src="" alt="" class="card__icon">
      <div class="card__title"></div>
      <div class="card__desc"></div>
    </div>


.card {
    &__icon {
      width: var(--icon-width, 20px);
    }

    &__title {
      margin-bottom: var(--margin-title, 10px);
    }
  }


Эта карточка используется во многих местах, на разных страницах сайта. И на каждой из страниц у неё меняются значения переменных margin-title и icon-width.

Сейчас я реализую всё следующим образом. К примеру, на странице news просто при использовании .card миксую к нему .news-card и получается следующее :

// та же разметка за исключением класса
    <div class="news-card card">
      <img src="" alt="" class="card__icon">
      <div class="card__title"></div>
      <div class="card__desc"></div>
    </div>


.news-card {
    --icon-width: 10px;
    --margin-title: 5px;
  }


И в дальнейшем выходит, что если мне нужно будет заюзать этот "news-card", то нужно будет писать все классы вновь "card news-card".

Если рассматривать вариант с модификатором, то можно просто сделать класс .card_page_news и туда прописать всё нужное. Но лично мне кажется что тогда образуется огромная куча стилей в рамках одного css файла с модификатором карточки для разных страниц.

Собственно, так и не могу до конца понять, какой подход правильнее в какой ситуации использовать...
  • Вопрос задан
  • 90 просмотров
Пригласить эксперта
Ответы на вопрос 1
Обычно формируется некий UI Kit, и максимум иногда нужно модифицировать отображение блока в отдельных случаях. Посмотрите что у вас с дизайном, может быть вы пытаетесь один блок подогнать под миллион разных задач, тогда как это должны быть разные блоки.

В общем случае, если вы корректируете стиль в отдельном случае, это модификатор. Если у вас их будет много – это тоже нормально (с точки зрения размещения классов), но обратите внимание почему их много, это не совсем типично иметь 20-40 разных модификаторов под один блок на разных страницах.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы