BEM e classes "ativas" / desacoplamento HTML e JS

Question

Comecei a usar a metodologia BEM para dissociar meu HTML e CSS ... e funciona muito bem na maioria das vezes. Mesmo que seja apenas sua opinião pessoal, eu ainda gostaria de saber como os outros lidam com isso:

Vamos supor que precisamos construir uma navegação simples. O HTML parece semelhante 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>

Não tenho certeza se preciso do ".nav_item "e" .nav_link "ou se for melhor praticar isso em vez disso

.nav__list > li { CODE }

Mas meu verdadeiro problema é como lidar com classes "ativas" (não apenas para navegações, mas em geral). É melhor usar classes "ativas" específicas como ".nav_Item-ativo ", para que você possa usar apenas uma única classe dentro do seu arquivo CSS ou se estiver usando nomes de classe mais gerais como" .Is-ativo "Funciona melhor? Mas você precisa especificar suas classes dentro do arquivo CSS como". Nav_item.is-attive "ou (que parece ainda pior para mim)" .nav__list> .is-attive ".

Todo método tem suas desvantagens. Para mim, a segunda maneira parece errada se estiver usando o BEM, mas se você estiver indo para a primeira maneira de encontrar "problemas" com seu JS, porque precisa "codificar" o nome de classe específico em seu js

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

Dessa forma, seu JS depende muito da sua estrutura HTML (ou isso não importa muito?), O que pode mudar ... e isso leva à segunda pergunta. Ouvi dizer que é bom dissociar não apenas o seu HTML e CSS, mas também o seu HTML e JS. Assim, você pode, por exemplo, usar essas classes ".js-" para adicionar eventos de cliques e todo esse tipo de coisa aos elementos em vez de usar suas classes de "estilo" para acionar esse tipo de evento. Então, em vez de usar

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

você teria

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

Eu acho que isso em combinação com os atributos de dados HTML5 funciona praticamente para qualquer coisa, mas estou me perguntando o que acontece com a navegação ou acordeões ou coisas assim. É melhor para a manutenção de usar essas classes ".js-" também (para cada item)

<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 devo usar $ (". Nav__Item") ... no meu JS neste caso? Mas assim você realmente não desacopla seu HTML e JS (pelo menos até agora eu entendi esse tópico). Não se trata apenas de navegações, mas de todos esses tipos de interações JavaScript, como acordeões, controles deslizantes e assim por diante.

Espero que vocês possam compartilhar algumas práticas recomendadas para essas perguntas e me ajudar.

Obrigado

Answer 1

A metodologia BEM diz que você não deve usar seletores globais, como seletores de tags, portanto, use o NAV__Item e o Nav__link.

A mesma história com modificador ativo. Você não deve ter entidades globais (você pode usar mixes, mas isso é um pouco diferente). Portanto, o melhor caminho é ir com o Nav__Item-ativo (ou NAV__Item_state_active na notação clássica).

E o BEM possui Solution para JS, HTML (ou modelos) e, na verdade, qualquer outra tecnologia de qualquer outro bloco.

A idéia principal é que quadra Sabe tudo sobre si mesmo: como fica (CSS), como funciona (JS), que html deve produzir (modelos), seus próprios testes, documentação, imagens etc.

E como a tecnologia CSS do bloco NAV aplica regras de maneira declarativa (você define algum seletor e todos os nós que correspondem a esse seletor são estilizados com essas regras) da mesma maneira que você pode descrever o JS do bloco NAV.

Por favor, dê uma olhada em http://xslc.org/jquery-bem/ que é o plug -in jQuery, que oferece possibilidade de trabalhar com blocos em BEM facilmente.

E caso você use algum sistema de construção, você pode colocar todas essas tecnologias na mesma pasta no sistema de arquivos:

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

Tendo essa estrutura de arquivos, você pode se aprofundar no que é o bem real e experimentar i-bem.js: http://bem.info/articles/bem-js-main-terms/

Answer 2

Na verdade, JS em termos de BEM geralmente considerado como uma boa ideia. Por exemplo, o BEM é ótimo para localizar e mover relações no CSS para a escala horizontal, mas em termos de JS é difícil abstrair a lógica em aplicações muito complexas.

No React.js, você pode usá -lo para nomeação de classe, e é isso (nós o usamos dessa maneira e funciona bem!). Eu escrevi a biblioteca Para desacoplar o problema de nomear.