Как каскадировать с БЭМ?

Question

[Dorothy]

Здравствуйте. Пытаюсь использовать БЭМ в верстке.
Иногда нужно реагировать на события родительских элементов и от этого менять свойства у дочерних элементов. В моих руках с БЭМ это выглядит немного уродливо. Приведу пример:

Есть элемент товара с картинкой и описанием. По умолчанию картинка товара полупрозрачная на 90%. При наведении курсора на карточку, картинка должна становиться непрозрачной.

Я использую LESS, код выглядит примерно так:

<div class="cart">
   <div class="cart__avatar"><img src="./pic.jpg" /></div>
   <div class="cart__body">
      Описание позиции
   </div>
</div>

.cart {
   &__avatar {
      img {
         opacity: .9;
      }
   }

   &__body {
      width: 50px;
   }

   &:hover {
      .cart__avatar img {
         opacity: 1;
      }
   }
}

Правильно ли я делаю с :hover селектором картинки при наведении?
Действительно ли он должен так плохо выглядеть?

Answer 1

[Кирилл Гладиков]

Если вы придерживаетесь методологии БЭМ ваш код должен выглядеть так

<div class="cart">
   <div class="cart__avatar">
     <img class="cart__img" src="./pic.jpg" />
   </div>
   <div class="cart__body">
      Описание позиции
   </div>
</div>

.cart {
   &__img{
      opacity: .9;
    }

   &__body {
      width: 50px;
   }

   &:hover {
      .cart__img {
         opacity: 1;
      }
   }
}

Comments

[Dorothy]

В любом случае, этот так себе выглядящий селектор

&:hover {
      .cart__img {}
}

остается и от него никуда не деться?

[Hyubert]

Dorothy,

.cart {

  $this: &

   &:hover {
      #{$this}__img {
         opacity: 1;
      }
   }
}

[Hyubert]

Dorothy, да

[Кирилл Гладиков]

Dorothy, Если вы посмотрите на реализацию БЭМ-а в Яндекс, вы увидите, что при наведение мышки на элементы, они добавляют класс модификатор "--hover" на них.
Тогда ваш код будет выглядеть так

.cart__img--hover {
  opacity: 1;
 }

Но это очень затратно, ловить все события через js и добавлять классы.

[Dorothy]

Кирилл Гладиков, да, я видел.
В общем, особо красивых способов, используя LESS, видимо, не находится.

[Кирилл Гладиков]

Dorothy, Похоже нет. Я не хочу устраивать тут холивар, но возможно вам нужно взглянуть на другие препроцессоры, лично я пользуюсь stylus, раньше использовал sass.