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

Question

Я начал использовать методологию БЭМ, чтобы отделить 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_элемент» и «.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, таких как аккордеоны, слайдеры и так далее.

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

Спасибо

Answer 1

Методология БЭМ гласит, что вам не следует использовать какие-либо глобальные селекторы, такие как селекторы тегов, поэтому используйте nav__item и nav__link.

Та же история с активным модификатором.У вас не должно быть никаких глобальных сущностей (вы можете использовать миксы, но это немного другое).Поэтому лучший способ — использовать nav__item--active (или nav__item_state_active в классической нотации БЭМ).

А у BEM есть решения для JS, HTML (или шаблонов) и вообще для любой другой блочной технологии.

Основная идея заключается в том, что блокировать знает все о себе:как выглядит (css), как работает (js), какой html должен выдавать (шаблоны), свои тесты, документация, изображения и т.д.

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

Пожалуйста, взгляните на http://xslc.org/jquery-bem/ это плагин jquery, который дает вам возможность легко работать с блоками в режиме БЭМ.

А если вы используете какую-либо систему сборки, вы можете поместить все эти технологии в одну папку файловой системы:

blocks/
    nav/
        __list/
            nav__list.css
            nav__list.js
        __item/
            nav__item.css
        nav.css
        nav.js
        nav.test.js
        nav.png
        nav.md

Имея такую ​​файловую структуру, вы можете углубиться в то, что такое БЭМ, и попробовать i-bem.js: http://bem.info/articles/bem-js-main-terms/

Answer 2

На самом деле, JS с точки зрения BEM часто считается не такой хорошей идеей. Например, BEM отлично подходит для локализации и перемещения отношений в CSS в горизонтальный масштаб, но с точки зрения JS трудно абстрагировать логику в очень сложных приложениях.

В React.js вы можете использовать его для напоминания о классах, и это все (мы используем его таким образом, и это работает нормально!). Я написал библиотека для проблемы развязки с именованием.