How to get rid of nesting according to BEM?

Question

JavaScript

There is a small code in js and css

(function($){
  $(function() {
    $('.menu__icon').on('click', function() {
      $(this).closest('.menu').toggleClass('menu_state_open');
    });
  });
})(jQuery);

.menu.menu_state_open .menu__icon span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}

.menu.menu_state_open .menu__icon span:nth-child(2) {
    transform: rotate(45deg);
}

.menu.menu_state_open .menu__icon span:nth-child(3) {
    transform: rotate(-45deg);
}

.menu.menu_state_open .menu__icon span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}

.menu.menu_state_open .menu__links {
    opacity: 1;  
}

If you follow the BEM model, then there should be no nesting, but then js does not work. Tell me how to fix according to BEM,

Answer 1

When modifying a block, it is quite possible to use a cascade. BEM doesn't forbid the cascade, but recommends avoiding it, and using it where you're sure it won't be a problem. In your case, this is a valid bam.
From the Yandex code

Answer 2

In my opinion, it's just the CSS preprocessor that suggests the SASS type. Will match perfectly

WRITE LESS, GET MORE