BEM et Classes "Active" / Découplage HTML et JS

Question

J'ai commencé à utiliser la méthodologie BEM pour découpler mon HTML et CSS ... et cela fonctionne assez bien la plupart du temps. Même si ce n'est que votre opinion personnelle, je voudrais toujours savoir comment les autres gèrent cela:

Supposons que nous devons créer une navigation simple. Le HTML ressemble à

<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>

Je ne sais pas si j'ai besoin du ".nav_Article "et" .nav_Kink "ou si c'est une meilleure pratie pour l'utiliser à la place

.nav__list > li { CODE }

Mais mon vrai problème est de savoir comment gérer les classes "actives" (non seulement pour les navigations, mais en général). Vaut-il mieux utiliser des classes "actives" spécifiques comme ".nav_Article - actif ", afin que vous puissiez simplement utiliser une seule classe dans votre fichier CSS ou si vous utilisez des noms de classe plus généraux comme" .is-active "fonctionne mieux? Mais vous devez alors spécifier vos classes dans votre fichier CSS comme". navigation de navigation_Item.is-active "ou (ce qui me semble encore pire)" .nav__list> .is-active ".

Chaque méthode a ses inconvénients. Pour moi, la deuxième façon semble mauvaise si vous utilisez BEM, mais si vous allez pour la première façon, vous rencontrez des "troubles" avec votre JS, car vous devez "coder dur" le nom de classe spécifique dans votre JS

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

De cette façon, votre JS s'appuie trop sur votre structure HTML (ou cela n'a-t-il pas trop d'importance?), Ce qui pourrait changer ... et cela conduit à la deuxième question. J'ai entendu dire qu'il était bon de découpler non seulement votre HTML et CSS, mais aussi votre HTML et JS. Vous pouvez donc par exemple utiliser ces classes ".js-" pour ajouter des événements de clic et tout ce genre de choses aux éléments au lieu d'utiliser vos classes de "style" pour déclencher ce genre d'événements. Donc au lieu d'utiliser

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

tu aurais

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

Je pense que cela en combinaison avec HTML5 Data-Attributes fonctionne à peu près pour n'importe quoi, mais je me demande ce qui arrive à la navigation ou aux accordéons ou des trucs comme ça. Est-ce mieux pour la maintenabilité d'utiliser ces classes ".js-" (pour chaque article)

<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>

Ou devrais-je utiliser $ (". Nav__Item") ... dans mon js dans ce cas? Mais de cette façon, vous ne déposez pas vraiment votre HTML et JS (du moins jusqu'à présent que j'ai compris ce sujet). Il ne s'agit pas seulement des navigations, mais de tous ces types d'interactions JavaScript, comme les accordéons, les curseurs, etc.

Je vais espérer que vous pourrez partager les meilleures pratiques pour ces questions et m'aider.

Merci

Answer 1

La méthodologie BEM indique que vous ne devriez pas utiliser de sélecteurs globaux tels que les sélecteurs de balises, alors utilisez NAV__Item et NAV__Link.

La même histoire avec un modificateur actif. Vous ne devriez pas avoir d'entités mondiales (vous pouvez utiliser des mélanges mais c'est un peu différent). La meilleure façon est donc d'aller avec NAV__Item - active (ou nav__item_state_active en notation BEM classique).

Et BEM a Sollution pour JS, HTML (ou modèles) et en fait toute autre technologie de bloc.

L'idée principale est que bloquer sait tout sur lui-même: à quoi il ressemble (CSS), comment il fonctionne (JS), ce qu'il devrait produire HTML (modèles), ses propres tests, documentation, images, etc.

Et comme la technologie CSS du bloc Nav applique les règles de manière déclarative (vous définissez un sélecteur et tous les nœuds qui correspondent à ce sélecteur avec ces règles) de la même manière que vous pouvez décrire JS du bloc Nav.

Veuillez jeter un œil à http://xslc.org/jquery-bem/ qui est le plugin jQuery qui vous offre la possibilité de travailler facilement avec des blocs de BEM.

Et dans le cas où vous utilisez un système de construction, vous pouvez mettre toutes ces technologies dans le même dossier sur le système de fichiers:

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

Ayant une telle structure de fichiers, vous pouvez approfondir ce qu'est BEM réely et essayer i-bem.js: http://bem.info/articles/bem-js-main-terms/

Answer 2

En fait, JS en termes de BEM souvent considéré comme pas une si bonne idée. Par exemple, BEM est idéal pour localiser et déplacer les relations dans CSS à l'échelle horizontale, mais en termes de JS, il est difficile de résumer la logique dans des applications très complexes.

Dans React.js, vous pouvez l'utiliser pour la dénomination des cours, et c'est tout (nous l'utilisons de cette façon et cela fonctionne bien!). J'ai écrit un bibliothèque Pour le problème de découplage avec la dénomination.