Classi BEM e "attive" / disaccoppiamento HTML e JS

Question

Ho iniziato a usare la metodologia BEM per disaccoppiare il mio HTML e CSS ... e funziona abbastanza bene per la maggior parte del tempo. Anche se è solo la tua opinione personale, vorrei comunque sapere come gli altri si occupano di questo:

Supponiamo che dobbiamo costruire una semplice navigazione. L'HTML sembra simile a

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

Non sono sicuro di aver bisogno del ".nav_Articolo "e" .nav_Link "o se è meglio la pratica usarlo invece

.nav__list > li { CODE }

Ma il mio vero problema è come affrontare le classi "attive" (non solo per le navigazioni, ma in generale). È meglio usare classi "attive" specifiche come ".nav_Articolo-Attivo ", quindi puoi semplicemente utilizzare una singola classe all'interno del tuo file CSS o se si utilizza più nomi di classi generali come" .is-Active "funziona meglio? Ma allora devi specificare le tue classi all'interno del tuo file CSS come". nav_item.is-attivo "o (che mi sembra ancora peggio)" .nav__list> .is-attivo ".

Ogni metodo ha i suoi lati negativi. Per me il secondo modo sembra sbagliato se si utilizza BEM, ma se stai andando per il primo modo in cui ti imbatti in "problemi" con il tuo JS, perché devi "codificare" il nome di classe specifico nel tuo JS

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

In questo modo il tuo JS si basa troppo sulla tua struttura HTML (o non importa troppo?), Che potrebbe cambiare ... e questo porta alla seconda domanda. Ho sentito che è bene disaccoppiarsi non solo il tuo HTML e CSS ma anche il tuo HTML e JS. Quindi, ad esempio, potresti usare quelle classi ".js-" per aggiungere eventi di clic e tutto quel tipo di cose agli elementi invece di usare le lezioni di "stile" per attivare quel tipo di eventi. Quindi invece di usare

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

avresti

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

Penso che questo in combinazione con HTML5 Data-Attributes funzioni praticamente per qualsiasi cosa, ma mi chiedo cosa succede alla navigazione o alle fisarmoniche o cose del genere. È meglio per la manutenibilità utilizzare anche quelle classi ".js-" (per ogni articolo)

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

o dovrei usare $ (". nav__item") ... nel mio js in questo caso? Ma in questo modo non si schianti davvero il tuo HTML e JS (almeno per quanto ho capito questo argomento). Non si tratta solo di navigazioni, ma di tutto quel tipo di interazioni JavaScript, come fisarmoniche, cursori e così via.

Spero che voi ragazzi possiate condividere alcune migliori pratiche per quelle domande e aiutarmi.

Grazie

Answer 1

La metodologia BEM afferma che non dovresti utilizzare selettori globali come i selettori di tag, quindi usa Nav__Item e Nav__Link.

La stessa storia con modificatore attivo. Non dovresti avere entità globali (puoi usare mix ma è un po 'diverso). Quindi il modo migliore è andare con Nav__Item-attivo (o nav__item_state_active nella notazione classica di Bem).

E BEM ha una soluzione per JS, HTML (o modelli) e in realtà la tecnologia di qualsiasi altro blocco.

L'idea principale è quella bloccare Sa tutto di se stesso: come appare (CSS), come funziona (JS), quale html dovrebbe produrre (modelli), i suoi test, la documentazione, le immagini, ecc.

E poiché la tecnologia CSS del blocco NAV applica le regole in modo dichiarativo (si definisce un selettore e tutti i nodi che corrispondono a questo selettore sono disegnati con queste regole) allo stesso modo in cui è possibile descrivere JS del blocco NAV.

Per favore dai un'occhiata http://xslc.org/jquery-bem/ Che è il plug -in jQuery che ti dà la possibilità di lavorare facilmente con i blocchi in modo BEM.

E nel caso in cui utilizzi un sistema di build puoi mettere tutte queste tecnologie nella stessa cartella sul filesystem:

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

Avere tale struttura di file puoi andare più in profondità a ciò che è in realtà e provare i-bem.js: http://bem.info/articles/bem-js-main-terms/

Answer 2

In realtà, JS in termini di BEM spesso considerato come una buona idea. Ad esempio, BEM è ottimo per localizzare e spostare le relazioni in CSS su scala orizzontale, ma in termini di JS è difficile da astrarre la logica in applicazioni molto complesse.

In React.js puoi usarlo per la denominazione della classe, e basta (lo usiamo in questo modo e funziona bene!). Ho scritto a biblioteca Per il disaccoppiamento con la denominazione.