Clases / desacoplamiento de BEM y "activo" HTML y JS

Question

Comencé a usar la metodología BEM para desacoplar mi HTML y CSS ... y funciona bastante bien la mayor parte del tiempo. Incluso si es solo su opinión personal, aún me gustaría saber cómo los demás lidiar con esto:

Supongamos que necesitamos construir una navegación simple. El HTML se parece 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>

No estoy seguro de si necesito el ".nav_artículo "y" .nav_link "o si es una mejor práctica usar esto en su lugar

.nav__list > li { CODE }

Pero mi verdadero problema es cómo lidiar con las clases "activas" (no solo para las navegaciones, sino en general). ¿Es mejor usar clases específicas "activas" como ".nav_Elemento: activo ", por lo que puede usar una sola clase dentro de su archivo CSS o si usar nombres de clase más generales como" .Is-activo "funciona mejor? Pero entonces debe especificar sus clases dentro de su archivo CSS como". navegación_Item.is-activo "o (que me parece aún peor)" .nav__list> .is-activo ".

Cada método tiene sus desventajas. Para mí, la segunda forma se ve mal si usa BEM, pero si va por la primera forma en que se encuentra con "problemas" con su JS, porque debe "codificar" el nombre de clase específico en su JS

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

De esa manera, su JS depende demasiado de su estructura HTML (¿o no importa demasiado?), Lo que podría cambiar ... y esto conduce a la segunda pregunta. Escuché que es bueno desacoplar no solo su HTML y CSS sino también su HTML y JS. Entonces, por ejemplo, podría usar esas clases ".js-" para agregar eventos de clic y todo ese tipo de cosas a elementos en lugar de usar sus clases de "estilo" para activar ese tipo de eventos. Entonces, en lugar de usar

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

tuvieras

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

Creo que esto en combinación con los atributos de datos HTML5 funciona para cualquier cosa, pero me pregunto qué sucede con la navegación o los acordeones o cosas así. ¿Es mejor para la mantenibilidad usar esas clases ".js-" también (para cada elemento)

<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 debería usar $ (". Nav__item") ... en mi JS en este caso? Pero de esa manera realmente no desacoplas tu HTML y JS (al menos hasta donde entendí este tema). No se trata solo de navegaciones, sino de todo ese tipo de interacciones JavaScript, como acordeones, controles deslizantes, etc.

Espero que puedan compartir algunas mejores prácticas para esas preguntas y ayudarme.

Gracias

Answer 1

BEM Metodology dice que no debe usar ningún selector global como selectores de etiquetas, así que use Nav__Item y Nav__Link.

La misma historia con modificador activo. No debe tener ninguna entidad global (puede usar mezclas, pero eso es un poco diferente). Entonces, la mejor manera es ir con Nav__item-Active (o Nav__item_state_Active en la notación clásica de BEM).

Y BEM tiene una sollution para JS, HTML (o plantillas) y en realidad la tecnología de cualquier otro bloque.

La idea principal es que bloquear Sabe todo sobre sí mismo: cómo se ve (CSS), cómo funciona (JS), qué html debe producir (plantillas), sus propias pruebas, documentación, imágenes, etc.

Y como la tecnología CSS del bloque NAV aplica reglas de manera declarativa (define algunos selectores y todos los nodos que coinciden con este selector se diseñan con estas reglas) de la misma manera que puede describir JS del bloque NAV.

Por favor eche un vistazo a http://xslc.org/jquery-bem/ que es el complemento jQuery, que le brinda la posibilidad de trabajar con bloques de manera fácil.

Y en caso de que use algún sistema de compilación, puede colocar todas estas tecnologías en la misma carpeta en el sistema de archivos:

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

Al tener dicha estructura de archivos, puede profundizar en lo que es BEM en realidad y probar i-bem.js: http://bem.info/articles/bem-js-main-terms/

Answer 2

En realidad, JS en términos de BEM a menudo se considera como una buena idea. Por ejemplo, BEM es excelente para localizar y mover las relaciones en CSS a la escala horizontal, pero en términos de JS es difícil abstraer la lógica en aplicaciones muy complejas.

En React.js puedes usarlo para nombrar a clases, y eso es todo (¡lo usamos de esta manera y funciona bien!). Escribí un biblioteca Para el problema de desacoplamiento con nombres.