Как избавиться от вложенности в соответствии с БЭМ?

Question

[MRcracker]

Есть небольшой код на js и 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;  
}

Если следовать модели БЭМ, то не должно быть вложенности, но тогда js не работает. Скажите, как исправить в соответствии с БЭМ,

Answer 1

[Danila]

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

Answer 2

[Иван]

По моему тут просто препроцессор CSS напрашивается типа SASS. Будет идеально соответствовать

ПИШИ МЕНЬШЕ, ПОЛУЧАЙ БОЛЬШЕ

Comments

[MRcracker]

вложенность все равно в css происходит