Errores comunes al implementar BEM

Las anidaciones son una locura, dejan el código mas entendible, en CSS se implemento el nesting para las anidaciones y ya es soportado en un 72.89% Chrome lo maneja Firefox aun no.

PROBLEMAS BEM

1. Problema uno

   Tengo un componente A que ya tiene sus propias clases y deseo añadirlo a un nuevo componente B. Debo agregar una nueva conveción para el componente A que está dentro de B?

   Respuesta:
   No necesariamente por que, lo que estoy tratando es de no repetir codigo y a mi parecer esto lo que haria es verme con la necesidad de escribir o extender el codigo de otra clase.

2. Problema dos

   En mi estructura de html tengo padres, hijos, nietos, tataranietos, etc;
   Pero BEM sólo deja usar 3 niveles. Que hago con los elementos nietos y sus descendientes?

   Respuesta:
   Simplemente los trataria a todos como si fueran hijos.

3. Problema tres

   Quiero utilizar la propiedad display: none para ocultar desde js un componente de card y componente de botón. Debo crear una clase para cáda componente siguiendo su propia estructura de BEM (card—hidden y button—hidden).

   Respuesta:
   Idealmente no, si lo que hace es ocultar con que cree una clase que se llame hidden que contenga el display: none seria suficiente.

Recomendaciones

Los proyecto que usan BEM son:

• Fáciles de leer
• Muy intuitivos
• Permiten evitar selectores anidados

BEM permite personalizar sus reglas y nomenclaturas.

Me encantaron los ejemplos. Lo de la representación de niveles me quedo más claro con ello.

Me queda una duda dice que reducimos 2 lineas de codigo pero la &__image no reemplaza al elemento card o como se veria el html con este ejemplo si lo anidamos, no me quedo muy claro

class="card">
    <imgclass="card__image"src="/image.png"alt="Crew Dragon" />
    <buttonclass="button button--active">button>
div>

Donde, el CSS se ve de la siguiente forma:

.card {
…
}
.card__image {
…
}
.button {
…
}
.button–active {
…
}

Pero si usamos SASS, nuestros estilos se verían de la siguiente forma:

.card {
&__image {
	…
   }
}
.button {
&–active {
…
}
}

jajaja este es uno de mis mas grandes errores que yo cometo

y aparte me enrredo mas poniendo por ejemplo:

main_card-producto__texto_ejemplo-de-german–primary–azul

jajaja soy lo peor en BEM jajaja

empeze a entenderlo mejor cuando mejor junte las palabras tipo nomenclatura camello, ejemplo:

mainCardProducto__textoEjemploDeGerman–primaryAzul

Anidacion BEM 4 generacion o profundidad de clases
<div class=“padre”
<div class=“hijo1”></div>
<div class=“hijo2”>
<p class=“hijo2__nieto”><p>
<img class=“hijo2__bisnieto” src=“xxx” alt=""/>
</div>
</div>

Caso 1: Creo que no (necesariamente) se debería cambiar las clases.
Caso 2: No representar el nivel de profundidad con BEM
Caso 3: Sí, se debería crear las clases específicas para cada caso (?)