How to cascade with BEM?

Question

How to cascade with BEM?

Hello. Trying to use BEM in the layout.
Sometimes you need to respond to events of parent elements and to change the properties of child elements. In my hands with the BEM, it looks a bit ugly. Here is an example:

There is an element item with picture and description. The default item picture translucent to 90%. When you hover on the card, the picture should become opaque.

I use LESS, the code looks like this:

<div class="cart">
 <div class="cart__avatar"><img src="./pic.jpg"></div>
 <div class="cart__body">
 Item description
</div>
</div>

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

 &__body {
 width: 50px;
}

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

Do I do with the :hover selector image when hovering?
Is he really supposed to look bad?

layne51 asked June 10th 19 at 15:04

Related questions

More answers about "How to cascade with BEM?"

1 answer

milan.Purdy answered on · Accepted Answer · 2019-06-10T13:06:45.024Z

milan.Purdy answered on June 10th 19 at 15:06

Solution

If you adhere to 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">
 Item description
</div>
</div>

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

 &__body {
 width: 50px;
}

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

In any case, this so-so looking selector

&:hover {
 .cart__img {}
}

remains, and from it can not escape? - layne51 commented on June 10th 19 at 15:09

,

.cart {

 $this: &

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

- maryjane.Corkery commented on June 10th 19 at 15:12

is spitting from the camp Sass? :) - layne51 commented on June 10th 19 at 15:15

Yes - maryjane.Corkery commented on June 10th 19 at 15:18

If you look at the implementation of the BEM and Yandex, you will see that when you hover your mouse on the items they add the class modifier "--hover" on them.
Then your code will look like this

.cart__img--hover {
 opacity: 1;
 }

But it is very expensive to catch all events using js to add classes. - milan.Purdy commented on June 10th 19 at 15:21

Yes , I saw.
In General, a particularly beautiful way, using LESS, apparently, is not. - layne51 commented on June 10th 19 at 15:24

Seems not. I don't want to get holivar, but maybe you need to look at other preprocessors, personally I use stylus, have used sass. - milan.Purdy commented on June 10th 19 at 15:27