Errores comunes al implementar BEM

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.

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.

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

excelente curso anteriormente no entendia como funcionaba BEM y intentaba utilizarlo pero caia en el error de reprecentar los niveles de profundidad, ahora ya todo me queda mas claro

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

Estas son las soluciones que estuve pensando sobre los tres problemas comunes al implementar BEM.

1. No, sería mejor usar la herencia.
2. Nombraría mi clases en base a mi contenido relevante como el titulo, texto e imágenes, serian “section__h1”, y los contenedores seria invisibles. Es decir “section__div” y luego “section__h1”, en lugar de “section__div” y “div__h1” o “section__div__h1”
3. Sí, de esta manera solo agregamos las clases de JS

REFLEXIÓN
Bueno yo diría que me equivoque en todas, pero digamos que fue un error a medias, porque en la primera pensaba que usar le herencia era más válido para no romper las reglas de BEM, en la segunda cometí el error de ignorar a mis contenedores y en la última me di cuenta que tengo que mejorar mi comprensión lectora 😅.

a mi me gusta mas la versión sin el pre procesador SAS

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 {
…
}
}

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 (?)