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

Question

[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 файла с модификатором карточки для разных страниц.

Собственно, так и не могу до конца понять, какой подход правильнее в какой ситуации использовать...

Comments

[Erl]

у вас меняет ширина и внешний отступ, это ведь типичный модификатор

[Barring]

Erl, просто в ситуации когда у меня, к примеру будет 20 страниц, и на каждой из них нужен будет свой вариант .card. Тогда выходит что в файле со стилями для .card будет куча модификаторов в духе .card_page_page1, .card_page_page2 и тд?

[Erl]

Barring, а почему на 20-ти страницах они разные? *чисто интересно*

[Erl]

Barring, и модификатор не может быть page1, модификатор обозначает состояние, к примеру .card__page_long, .cart__page_blue

[Barring]

Erl, на разных страницах разные отступы, разные размеры, не вижу тут ничего такого. И я как-то не вижу логики в именовании .card__page_long -> карточка для длинной страницы? А в варианте .card_page_page1 - карточка для страницы page1.

[Realetive]

Erl, маленькая, но очень важная оговорка: ширина и внешний отступ меняются у элементов, а не у блока — у блока не должно быть внешней геометрии. Т. е. если надо было изменить ширину .card или внешний отступ от .card, то это точно следовало делать не в .card и не в модификаторе .card_*, а именно в элементе родительского (т. е. на уровень выше) блока (если это список карточек, то, например в .list__item, если просто лэйаут страницы — в чём-то типа .page__layout.).

Answer 1

[Роман Якимчук]

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

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