Правильное применение модификаторов?

Форум /

<div class="reg">
  <button class="reg__btn reg__btn_close">Закрыть</button>
  <button class="reg__btn reg__btn_reg">Регистрация</button>
  <button class="reg__btn reg__btn_login">Вход</button>
</div>

.reg {}
.reg__btn {
  border: 0px;
}
.reg__btn_close {
  position: absolute;
  top: 0px;
  right: 0px;
  background-image: url(images/icon_close.png);
}
.reg__btn_reg {
  background-color: red;
  background-image: url(images/icon_reg.png);

}
.reg__btn_login {
  border: 1px solid black;
  background-color: green;
  background-image: url(images/icon_login.png);
}

Или кнопки с значительными изменениями лучше обозначать отдельным элементом, например: reg__close-btn?

4 years ago

Realetive

Да, вполне корректное применение.

4 years ago

vitaly-lutokhin

И не будете ругаться, что без ключ-значение? Разве эти модификаторы обозначают состояние кнопок? Я запутался чтото(((

4 years ago

Realetive

Конечно, лучше их сгруппировать — вряд ли может быть <button class="reg__btn reg__btn_reg reg__btn_login">Кнопа</button>, а судя по модификаторам — может. А вот reg__btn_view_reg или reg__btn_view_login или reg__btn_view_close — только один и это сразу видно.

4 years ago

vitaly-lutokhin

То есть оба варианта с точки зрения бем приемлемы, верно?

4 years ago

Realetive

Тут уже три варианта:

reg__btn_close — сомнительный, гарантирует возникновение ошибок;
reg__close-btn — приемлимый, явно выделяет компонент в списке сущностей;
reg__btn_view_reg — приемлимый, группирует соседние элементы по общему признаку, позволяя переиспользовать общие стили.

4 years ago

vitaly-lutokhin

Спасибо) А вы кем являетесь если не секрет? Только вы и отвечаете)

4 years ago

Realetive

Просто тот, кто разобрался и постиг БЭМ (благодаря ответам здесь и в Телеграмме) — теперь продолжаю «традицию».

4 years ago

EMDM45

А чем эти кнопки отличаются? Если. например, только цветом, то мне кажется проще написать что-то типа

.button.button_color_red

reg__btn_close скорее всего относится к модальному окну. Поэтому: .modal и .modal__close-button

Чтобы оставлять комментарии, необходимо авторизоваться.