How to cascade with BEM?

Question

css

Hello. I'm trying to use BEM in layout.
Sometimes you need to react to the events of parent elements and from this change the properties of child elements. In my hands with BEM it looks a bit ugly. Let me give you an example:
There is a product element with a picture and description. By default, the product image is 90% translucent. When you hover over the card, the picture should become opaque.
I'm using LESS, the code looks something like this:

<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;
      }
   }
}

Am I doing the right thing with the :hover image selector on hover?
Does he really have to look so bad?

Answer 1

If you follow the BEM methodology your code should look like this

<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;
      }
   }
}