No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
22H
14M
57S

Errores comunes al implementar BEM

5/19
Recursos

Aportes 7

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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鈥攈idden y button鈥攈idden).

    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鈥揳ctive {
鈥
}

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鈥損rimary鈥揳zul

jajaja soy lo peor en BEM jajaja

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

mainCardProducto__textoEjemploDeGerman鈥損rimaryAzul

Anidacion BEM 4 generacion o profundidad de clases
<div class=鈥減adre鈥
<div class=鈥渉ijo1鈥></div>
<div class=鈥渉ijo2鈥>
<p class=鈥渉ijo2__nieto鈥><p>
<img class=鈥渉ijo2__bisnieto鈥 src=鈥渪xx鈥 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 (?)