Как правильно изменять дочерний блок при наведении на блок-родитель в БЭМ?

Question

[Muvka]

Есть блок block. В блоке есть кнопка - тоже отдельный блок button. Как правильно по БЭМу изменять состояние кнопки при наведении на родительский блок block? .block:hover .button - это не правильно. Подставлять класс кнопке при наведении на родителя с помощью js?

Answer 1

[alex]

например так:

<div class="block">
  <div class="block__button button"></div>
</div>

.block:hover .block__button {...}

Comments

[Muvka]

Но ведь не правильно изменять внутреннюю стилизацию блока из другого блока. Из родительского блока я максимум ширину и отступы задаю. Я просто думал, что это не правильно.

[Realetive]

Не, вполне правильно. Точнее, это оптимальный способ. Нужно лишь быть уверенным, что специфичность изменяемого свойства .block:hover .block__button выше, чем у .button.

[Muvka]

Realetive, Она в любом случае будет выше. Хорошо. Спасибо за ответ.

[alex]

Muvka, а где тут блок меняется? тут элемент меняется.

[Muvka]

Alex, button - это блок. Который является элементом также, но это тоже отдельный блок. В этом и вся загвоздка.

[alex]

Muvka, нет. вы меняете элемент .block__button. а т.к. .button замиксован с этим элементом, то эти изменения и к нему применятся (чего мы и добиваемся). криминального в этом ничего нет.

[Realetive]

Muvka,

.button {
  color: #123 !important;
}

.block:hover .block__button {
  color: #456;  /* не будет иметь эффекта */
}

[Muvka]

Realetive, Я забыл, что это такое, !important... :)

[Muvka]

Alex, И вам спасибо.