Нужны ли здесь модификаторы?

Question

[Лев Александров]

Драсте.
У меня в дизайне вот такой вот раздел с кнопками:



Кнопки именуются таким образом: Button/[какая-то особенность]
У меня 2 вопроса:
1. Все, что подписано как button должно быть одним блоком, но с разными модификаторами в зависимости от особенности? Или мне вообще должно быть наплевать, что написано в дизайне, и я могу делать так, как захочу?
2. Меня смущает кнопка в левом нижнем угле. Как видите, при наведении у нее появляется выпадающая часть. Я сначала подумал, это select, но потом в левой панели фигмы посмотрел, что название элемента Button/Language. Стоит ли переделывать мой select как button с модификатором language?

P. S. Есть в дизайне раздел с селектами и они совсем немного отличаются от этого селекта language.
Я тут подумал и мне кажется, это надо сделать button'ом, т. к. при выборе языка же должна перезагрузиться страница, но тогда возникает другая проблема - усложняется внутренняя структура кнопки и тогда как мне изменять "внутренности" кнопки через один модификатор блока?


В общем, как бы вы поступили в данной ситуации?

Comments

[Вадим]

Лев Александров, к слову выбор языка это не кнопка, а ссылка. Сами же пишите "Происходит перезагрузка страницы".
Всё что влияет на адресную строку - ссылка.

Answer 1

[Realetive]

1. Если делать по БЭМ, то да, правильно выделять каждое отличие от базовой реализации в отдельный модификатор (по возможности группируя их по признакам: размер, состояние, оформление + одиночные «булевы» модификаторы «disabled», «loading»). Хорошо сделано, например, в https://ru.bem.info/libraries/classic/bem-componen.... Иконка внутри — это не модификатор, это просто вложенный блок. Если вложенный блок меняет внешний вид, то да, тут использование модификатора оправдано. Например:

<button type="button" class="btn btn_size_large btn_state_success">
  Подробнее
</button>

<a href="/article" class="btn btn_size_large btn_state_success">
  Подробнее
</a>

<button type="button" class="btn btn_size_large btn_type_like">
  <span class="icon icon_size_large icon_type_thumb-up icon_state_success"></span>
</button>

<button type="button" class="btn btn_size_large btn_type_dislike btn_with-count">
  <span class="icon icon_size_large icon_type_thumb-down icon_state_error"></span>
  <span class="btn__count">12</span>
</button>

2. Select — это три блока: Button + Popup с Menu

Comments

[Лев Александров]

Ааа, поонял. По сути, да, селект это и есть кнопка...

popup'ом вы называете всплывающий прямоугольник, а menu - список option'ов? Нельзя ли их объединить в один блок?

Вижу, вы используете другой неймниг модификатора - через одиночное подчеркивание.
А если использовать два дефиса --, то группировка по признаку должна быть по аналогии как у вас? Например, btn--size--large?

[Realetive]

Да, popup — универсальный блок с абсолютным (position: absolute / fixed) позиционированием — для селекта, модалки, попапов, всплывающих алертов и т. д. Можно и объединить, но тогда у каждого блока с абсолютным позиционированием будет своя логика этого самого позиционирования. Тут вопрос вкуса.

Про формат нейминга — да, я привык к классическому, но какой вы будете использовать — неважно. Главное — единообразно и чтобы не было разночтений (модификатор должен точно отличаться от элемента).