html - ovulo - Bloque BEM, denominación y anidación.

fecundacion y embarazo

Question

Estoy tratando de envolver mi cabeza alrededor de la convención de nombres BEM. Estoy atascado en esto. Puedo malinterpretar algo, veamos.

Tengo una barra lateral de navegación y una navegación de contenido.

Mi barra lateral se ve así

<div class="sidebar">
    <ul class="sidebar__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

Y mi contenido de navegación se ve así

<div class="content">
    <ul class="content__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

Ahora me encontraré con un problema si estilo .nav__item, ocurren en mis dos navegaciones y no deberían tener el mismo estilo. ¿Debo hacer un poco de anidación aquí, o estoy nombrando incorrectamente mis bloques y elementos?

Ejemplo de anidación en CSS:

.content__nav .nav__item { background: Red; }

O debería nombrarlo así:

<li class="content__nav__item"><a href="#" class="content__nav__link">LINK</a></li>

¿Puede usted ayudar?

Answer 1

Considere la idea de pares _key_value para modificadores (el bloque o elemento está separado del nombre del modificador con un guión bajo y su valor con otro).

Es lógico distinguir los modificadores entre sí (por ejemplo, nav_type_content y nav_type_sidebar se nav_type_sidebar al lugar donde se encuentra nav en la página pero los modificadores que configuran el tema, el tamaño o el funcionamiento de los enlaces a través de ajax son diferentes) y, por lo tanto, entender qué modificadores no pueden ser se utilizan juntos en un nodo DOM.

También es más conveniente trabajar con pares clave: valor en javascript.

Y hay bastantes componentes y herramientas listos para usar que utilizan dicha convención: https://github.com/bem/

Answer 2

Hay una serie de variantes sobre cómo escribir clases BEM, así que tenga en cuenta que son múltiples estándares en competencia. Comenzó como un conjunto de pautas sueltas. Desde que publicamos esta respuesta, Yandex ha revisado significativamente su estándar oficial (es una gran mejora). La versión de BEM que utilizo se basa en gran medida en un artículo de Nicolas Gallagher .

En este punto, uso "OOBEMITLESS atómico" , que en realidad es solo una forma de decir que las clases son modulares y tienen espacios de nombre, los selectores tienen poca especificidad y los estados pueden alternarse con clases que permiten escalar CSS, encima de un preprocesador de CSS Para hacer el código más conciso y expresivo.

Dicho todo esto, usaré el siguiente estándar BEM:

• nombres de clase con guión como bloques:
  foo-bar
• nombre de bloque seguido de __ seguido de nombres de clase con guión para elementos:
  foo-bar__fizz-buzz
• nombres de bloques o elementos seguidos de -- seguidos de nombres de clase con guión para modificadores:
  foo-bar--baz , foo-bar--baz__fizz-buzz , foo-bar__fizz-buzz--qux

Forma corta de BEM: block-name__element-name--modifier-name

Tienes tres bloques diferentes en tus ejemplos:

1. sidebar , que tiene un elemento sidebar__nav
2. content , que tiene un elemento content__nav
3. nav , que tiene elementos nav__item y nav__link

La sidebar y los bloques de content parecen ser variaciones en el mismo bloque, y podrían representarse como .region.region--sidebar y .region.region--content .

El bloque de nav está implícito en el elemento ul , y debes hacerlo explícito:

<ul class="nav"><!-- could be content__nav or sidebar__nav as well if you choose -->
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
</ul>

Una vez que haya especificado que el elemento ul es un bloque de nav , tiene sentido que se modifique el bloque de nav :

<ul class="nav nav--content">
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
</ul>

Una vez que haya configurado las clases CSS, el estilo de todos los elementos nav__item es simplemente:

.nav__item {
    ...styles here...
}

y reemplazar esos estilos para los elementos del contenido nav__item es:

.nav--content__item {
    ...styles here...
}

Answer 3

Probablemente debería echar un vistazo a las preguntas frecuentes de BEM .

¿Cuál sería un nombre de clase para un elemento dentro de otro elemento? .block__elem1__elem2 ?

¿Qué debo hacer si mi bloque tiene una estructura compleja y sus elementos están anidados? Las clases de CSS como block__elem1__elem2__elem3 ven block__elem1__elem2__elem3 . De acuerdo con el método BEM, la estructura de bloques debe ser aplanada; no es necesario reflejar la estructura DOM anidada del bloque. Por lo tanto, los nombres de clase para este caso serían:

.block{}
.block__elem1{}
.block__elem2{}
.block__elem3{}

Mientras que la representación DOM del bloque puede estar anidada:

<div class=''block''>
    <div class=''block__elem1''>
        <div class=''block__elem2''>
            <div class=''block__elem3''></div>
        </div>
    </div>
</div>

Además del hecho de que las clases se ven mucho más agradables, hace que los elementos dependan únicamente del bloque. Por lo tanto, puede moverlos fácilmente a través del bloque al proporcionar cambios a la interfaz. Los cambios de la estructura DOM del bloque no necesitarían los cambios correspondientes al código CSS.

<div class=''block''>
    <div class=''block__elem1''>
        <div class=''block__elem2''></div>
    </div>
    <div class=''block__elem3''></div>
</div>