Как правильно назвать модификатор по БЭМ?

Question

[Muvka]

Есть вот такая разметка отзыва -

<li class="reviews-list__item">
        <blockquote class="reviews-list__review">
          <cite class="reviews-list__name">Мария</cite>
          <p class="reviews-list__comment">В частности, начало повседневной работы по формированию позиции выявляет срочную потребность форм воздействия. Современные технологии достигли такого уровня, что сплочённость команды профессионалов влечет за собой процесс внедрения</p>
          <p class="rating rating--5 reviews-list__rating">
            <span class="visually-hidden">Оценка 5</span>
          </p>
        </blockquote>
    </li>

Это отзыв о магазине. Так же, есть отзывы о товаре, которые очень похоже выглядят, за вычетом того, что размеры шрифта у элементов там меньше. Так вот как правильно выбирать модификаторы для таких случаев? --small - это плохой модификатор. Лучшее, что приходит в голову - --product. Но вроде как модификатор должен отражать суть модификации... Голова взрывается. Помогите!

Answer 1

[Виталий Першин]

Ключ-значение
block_size_small
block__element_size_small

В данном случае модификатор у нас size, а его значение может быть small, large и тд

Comments

[Muvka]

Спасибо за ответ. Только смущает, что все-равно размер в названии модификатора. Кто-то пишет, что размеры и цвета плохо использовать. А в документации прямо указано, что можно...

[Виталий Першин]

Muvka, его не плохо использовать, если делать это правильно. https://ru.bem.info/methodology/quick-start/#%D0%B...

Модификатор

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Особенности:
Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).

[Muvka]

Виталий, А вот вопрос - судя по документации, там похоже на модификатор модификатора. Т.е. через одиночное подчеркивание. А если я для модификатора использую двойное тире, то у меня модификатор как должен выглядеть? Так --size-small или так --size--small?

[Виталий Першин]

Muvka,

модификатор модификатора

Это не модификатор модификатора, это модификатор-ключ и его значение. По учалчанию любой модификатор имеет условное значение true, просто его явно не указывают, обычно пишут так:
block_active
Но на самом деле подразумевается вот так:
block_active_true

А если я для модификатора использую двойное тире

Значит и значение модификатора тоже двойное тире
block--active--true

[Muvka]

Виталий, Да, нашел. Ссылка
block-name__elem-name--mod-name--mod-val