csssassbem

BEM nesting elements and hover effects


So, let's say that I have the following code

<div class="list">
    <div class="list__wrapper"> 
        <ul class="list__menu">
            <li class="list__item">
                <a class="list__link">Link</a>
                <p class="list__description">Desc</p>
            </li> 
        </ul>
    </div>
</div>

My SCSS would then look something like this:

.list {
    &__wrapper {

    }    

    &__menu {

    }
    ...
}

PROBLEM:

I want to create a hover effect over li which will hold list_link and some other elements, but I want to change color ONLY to list__link class and I'm wondering how to most effectively do that in SCSS.

My current solution (which I don't like very much)

.list {
    &__item {
        &:hover {
            .list__link {
                 color: $secondary
            }
        }
    }    
}

I'm sure that I'm doing something wrong because it feels like I'm breaking what should be SCSS and BEM advangates, but so far I haven't found a solution.


Solution

  • You can simply this selector by doing the following:

    .list {
      &__item:hover .list__link {
        color: $secondary;
      }
    }