Как по меню БЕМ правильно построить вложенность SCSS с активным элементом?

Question

[Максим]

Код меню, более сложный вариант:

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item menu__item_state_active">
      <a class="menu__link" href="">
        .menu__icon
        .menu__text
      </a>
    </li>
    <li class="menu__item"><a class="menu__link" href=""></a></li>
    <li class="menu__item"><a class="menu__link" href=""></a></li>
  </ul>
</nav>

Какие есть другие варианты?

.menu {
  $menu: &;
  &__item {...}
  &__link {color: #ccc;}

/* Для активного элемента */
  &__item {
    &_state_active {
      #{$menu} {
        &__icon {
          fill: #212121;
        }
        &__text {
          color: #212121;
        }
      }
    }
  }
}

Comments

[Сергей delphinpro]

Так более читабельно:

.menu {
  &__item {...}
  &__link {color: #ccc;}

  /* Для активного элемента */
  &__item_state_active &__link {
    color: #212121;
  }
}

[Максим]

Сергей delphinpro, Добавил вариант с вложенными глубже элементами.
Но в целом, для каждого внутри активного, просто более длинная цепочка для замены, либо вариант с переменной это и есть самый удачный?

[Сергей delphinpro]

Максим, так же

.menu {
  &__item {...}
  &__link {color: #ccc;}

  /* Для активного элемента */
  &__item_state_active &__link {
    color: #212121;
  }
  &__item_state_active &__text {
    color: #212121;
  }
}

Отбивка комментарием лучше выглядит, чем ненужное нагромождение вложенности.

Однако и ваш вариант имеет место быть, если опять же убрать лишний уровень

.menu {
  $menu: &;
  &__item {...}
  &__link {color: #ccc;}

  /* Для активного элемента */
  &__item_state_active { // не нужно разделять элемент с модификатором в коде. В этом просто нет никакого смысла.
    #{$menu} {
      &__icon {
        fill: #212121;
      }
      &__text {
        color: #212121;
      }
    }
  }
}

Но если решили использовать такой вариант, будьте осторожны внутри блока со сложными селекторами. Легко запутаться и ошибиться.

[Максим]

Сергей delphinpro, Спасибо. я разделял модификатор т.к. в текущей реализации в проекте у меня модификатор отдельным другим классом