БЭМ и активные классы / Разделение HTML и JS

Я начал использовать методологию БЭМ, чтобы отделить свой HTML и CSS... и в большинстве случаев это работает очень хорошо. Даже если это только ваше личное мнение, я все равно хотел бы знать, как другие справляются с этим:

Предположим, нам нужно построить простую навигацию. HTML выглядит примерно так

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item">
            <a class="nav__link" href=""></a>
        </li>
        <li class="nav__item">
            <a class="nav__link" href=""></a>
        </li>
    </ul>
</nav>

Я не уверен, нужны ли мне ".nav_item" и ".nav_link" или лучше использовать их вместо этого

.nav__list > li { CODE }

Но моя настоящая проблема заключается в том, как работать с «активными» классами (не только для навигации, но и вообще). Лучше ли использовать определенные «активные» классы, такие как «.nav_item--active», чтобы вы могли просто использовать один класс внутри вашего файла CSS, или если работает использование более общих имен классов, таких как «.is-active». лучше? Но тогда вам нужно указать свои классы внутри файла CSS, например «.nav_item.is-active» или (что мне кажется еще хуже) «.nav__list > .is-active».

У каждого метода есть свои минусы. Для меня второй способ выглядит неправильным при использовании БЭМ, но если вы идете по первому пути, вы столкнетесь с «проблемами» с вашим JS, потому что вам нужно «жестко закодировать» конкретное имя класса в вашем JS.

someElement.addClass(".nav__item--active");

Таким образом, ваш JS слишком сильно зависит от вашей HTML-структуры (или это не имеет большого значения?), которая может измениться... И это приводит ко второму вопросу. Я слышал, что хорошо разделять не только HTML и CSS, но и HTML и JS. Таким образом, вы могли бы, например, использовать эти классы «.js-» для добавления событий кликов и всего подобного к элементам вместо того, чтобы использовать классы «стиля» для запуска таких событий. Поэтому вместо использования

<button class="btn btn--large"></button> // $(".btn--large") in jQuery

вам придется

<button class="btn btn--large js-dostuff"></button> // $(".js-dostuff") in jQuery

Я думаю, что это в сочетании с атрибутами данных HTML5 работает практически для всего, но я спрашиваю себя, что происходит с навигацией, аккордеонами или подобными вещами. Лучше ли для удобства обслуживания использовать эти классы ".js-" (для каждого элемента)

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item js-open-subnav">
            <a class="nav__link" href=""></a>
            <ul class="nav__sub">
                <!-- ... -->
            </ul>
        </li>
    </ul>
</nav>

или я должен использовать $(".nav__item")... в моем JS в этом случае? Но таким образом вы на самом деле не разделяете свой HTML и JS (по крайней мере, насколько я понял эту тему). Речь идет не только о навигации, но и обо всех подобных взаимодействиях с javascript, таких как аккордеоны, ползунки и так далее.

Я надеюсь, что вы, ребята, поделитесь некоторыми рекомендациями по этим вопросам и поможете мне.

Спасибо