BEM es una convención o metodología para nombrar tus clases de CSS. Por sus siglas en inglés, BEM significa Bloque, Elemento y Modificador.
En esta guía aprenderemos:
BEM funciona identificando el bloque, el elemento y el modificador de un componente.
El cohete Falcon 9 de SpaceX está compuesto por varias partes que hacen posible el transporte confiable y seguro de personas o cargas útiles a la órbita terrestre (incluso más allá). Para cada una de las partes podemos crear una analogía.
Vamos a identificar quién sería el elemento bloque, quiénes serían los elementos y quiénes serían los modificadores, así:
Teniendo entonces:
Después de revisar la analogía con el cohete Falcon 9, revisemos algunos ejemplos que podemos encontrarnos en la vida real:
😍
Los nombres de clases con convención BEM,pueden tener la siguiente sintaxis:
[bloque]
[bloque]__[elemento]
[bloque]--[modificador]
[elemento]--[modificador]
[bloque]__[elemento]--[modificador]
Teniendo en cuenta lo anterior, el CSS para nuestro Falcon 9 se escribiría así:
.falcon9 { ... }
.falcon9--fairing { ... }
.falcon9--dragon { ... }
.falcon9__first-stage { ... }
.falcon9__interstage { ... }
.falcon9__second-stage { ... }
Y así se vería el HTML:
<rocketclass="falcon9 falcon9--dragon"><stageclass="falcon9__first-stage">stage><stageclass="falcon9__interstage">stage><stageclass="falcon9__second-stage">stage>rocket>
Además, el CSS siguiendo BEM con un ejemplo de la vida real se escribiría así:
.button { ... }
.button--active { ... }
.button__icon { ... }
.button__text { ... }
Y así se vería el HTML:
<buttonclass="button button--active"><iclass="button__icon">i><spanclass="button__text">span>button>
⚠️ Importante: recuerda que:
__
) se usan para separar el bloque del elemento,--
) se usan para separar el bloque o el elemento del modificador.💡 Nota: BEM permite cambiar esta nomenclatura. También puedes encontrar nombres de clase así:
[bloque]__[elemento]-[modificador]
,[bloque]__[elemento]_[modificador]
, entre otros. Lo más importante a la hora de usar una de estas nomenclaturas es ser consistente en todo el proyecto.
Tal vez te preguntes, “Pero, ¿Teff, para qué seguir esta metodología si el resultado en CSS es el mismo? ¡Solo estamos haciendo más trabajo!”
Identifiquemos el bloque, los elementos y los modificadores (si los tiene) de la siguiente card:
De la imagen anterior, tenemos lo siguiente:
Su estructura de HTML con la convención de clases BEM, sería:
class="card"><imgclass="card__image"src="/image.png"alt="spacesuit" /><pclass="card__text">p><pclass="card__text">p>div>Navbar:
Identifiquemos el bloque, los elementos y los modificadores (si los tiene) del siguiente navbar:
De la imagen anterior, tenemos lo siguiente:
- Bloque: navbar
- Elementos: logo, items
- Modificadores: gray
Su estructura de HTML con la convención de clases BEM, sería:
Section:
Identifiquemos el bloque, los elementos y los modificadores (si los tiene) de la siguiente sección:
Como de la imagen anterior identificamos 2 bloques, vamos a dividir la estructura en 2 partes, así:
Para el bloque 1:
- Bloque: section
- Elementos: text, image
- Modificadores: primary, secondary-semibold, secondary-bold
Para el bloque 2:
- Bloque: list
- Elementos: item, text
- Modificadores: gray
La estructura de HTML con la convención de clases BEM para ambos bloques, sería:
<sectionclass="section"><div><h2class="section__text section__text--primary">FALCON 9h2><pclass="section__text section__text--secondary-semibold">Falcon 9, the world's first orbital class reusable rocket...p><pclass="section__text section__text--secondary-bold">Learn more about Falcon 9p><ulclass="list"><liclass="list__item"><spanclass="list__text">VEHICLE HEIGHTspan><div><spanclass="list__text">70mspan><spanclass="list__text list__text--gray">/229.6 ftspan>div>li><liclass="list__item"><spanclass="list__text">VEHICLE DIAMETERspan><div><spanclass="list__text">3.7mspan><spanclass="list__text list__text--gray">/12 ftspan>div>li><liclass="list__item"><spanclass="list__text">FAIRING HEIGHTspan><div><spanclass="list__text">13.1mspan><spanclass="list__text list__text--gray">/43 ftspan>div>li><liclass="list__item"><spanclass="list__text">FAIRING DIAMETERspan><div><spanclass="list__text">5.2mspan><spanclass="list__text list__text--gray">/17.1 ftspan>div>li>ul>div><div>div>section>
Casos con lo que debes y no debes hacer con BEM
1️⃣ Primer caso
- Lo que sí: dejar la clase principal
card
y añadir otra clase con modificador.
class="card card--flat">div>- Lo que no: usar la clase con modificador como clase principal.
class="card--flat">div>2️⃣ Segundo caso
- Lo que sí: no representar los niveles de profundidad de HTML con BEM.
<divclass="card"><imgclass="card__image"src="/image.png"alt="Crew Dragon" /><pclass="card__text"><iclass="card__icon">p>div>
- Lo que no: representar los niveles de profundidad de HTML con BEM.
<divclass="card"><imgclass="card__image"src="/image.png"alt="Crew Dragon" /><pclass="card__text"><iclass="card__text__icon">p>div>
3️⃣ Tercer caso
- Lo que sí: incluir la clase en un hijo que necesita estilos.
<divclass="card"><imgclass="card__image"src="/image.png"alt="Crew Dragon" />div><style>
.card { ... }
.card__image { ... }
style>
- Lo que no: Omitir la clase en un hijo que necesita estilos.
<divclass="card"><imgsrc="/image.png"alt="Crew Dragon" />div><style>
.card { ... }
.card img { ... }
style>
3 problemas comunes con BEM y cómo solucionarlos
1️⃣ Primer caso
- Problema: tengo un componente A que ya tiene sus propias clases y deseo añadirlo a un nuevo componente B. ¿Debo agregar una nueva convención para el componente A que estará dentro de B?
Componente A:
<buttonclass="button button--active">button>
Componente B:
<divclass="card"><imgclass="card__image"src="/image.png"alt="Crew Dragon" />div>
- Solución: puedes dejar el componente A con las clases que ya estaban establecidas así no sean coherentes con el nuevo componente B, por ejemplo:
<divclass="card"><imgclass="card__image"src="/image.png"alt="Crew Dragon" /><buttonclass="button button--active">button>div>
2️⃣ Segundo caso
- Problema: en mi estructura de HTML tengo padres, hijos, nietos, tataranietos, etc; pero BEM sólo me deja usar 3 niveles. ¿Qué hago con los elementos nietos y sus descendientes?
<divclass="card"><imgclass="card__image"src="/image.png"alt="Crew Dragon" /><divclass="card__footer"><pclass="card__footer__text"><iclass="card__footer__text__icon"><p>div>div>
- Solución: como lo mencionamos anteriormente, BEM no representa los niveles de tu estructura de HTML. Lo ideal en este caso sería tener:
<divclass="card"><imgclass="card__image"src="/image.png"alt="Crew Dragon" /><divclass="card__footer"><pclass="card__text"><iclass="card__icon"><p>div>div>
3️⃣ Tercer caso
- Problema: quiero utilizar la propiedad
display: none
para ocultar desde JavaScript un componente de Card y un componente de Botón. ¿Debo crear una clase para cada componente siguiendo su propia estructura de BEM (card--hidden
y button--hidden
)?
<divclass="card card--hidden"><imgclass="card__image"src="/image.png"alt="Crew Dragon" />div><buttonclass="button button--hidden">button><style>.card--hidden {
display: none;
}
.button--hidden {
display: none;
}
style>
- Solución: puedes crear una clase independiente a la estructura de BEM para aplicar propiedades generales, así, reducirás la cantidad de líneas de JavaScript ya que no tendrás que usar una clase específica para cada componente.
<divclass="card hidden"><imgclass="card__image"src="/image.png"alt="Crew Dragon" />div><buttonclass="button hidden">button><style>.hidden {
display: none;
}
style>
• BEM + SASS
Dragon es la primera nave espacial privada en llevar humanos a la estación espacial. Pero, no lo hace sola. Dragon trabaja en conjunto con el cohete Falcon 9 para tener un lanzamiento perfecto.
Así como Dragon y Falcon 9 trabajan juntos, BEM y SASS también. SASS es un preprocesador de CSS que te permite anidar selectores, crear bucles, funciones, entre otras cosas. Y, adicionalmente, gracias a la sintaxis de SASS, podemos tener una combinación perfecta en nuestras hojas de estilos.
Por ejemplo, uno de nuestros ejercicios anteriores fue el siguiente:
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 {
...
}
}
Aquí sólo alcanzamos a reducir 2 líneas de código, pero, ¿te alcanzas a imaginar cuántas líneas de código podríamos ahorrarnos en un proyecto con mucho más HTML y CSS? Este es uno de los súper poderes de combinar BEM con SASS, aparte de que se ve mucho más lindo y limpio nuestro código.
Recomendaciones finales
Los proyectos que usan BEM son fáciles de leer, muy intuitivos y permiten evitar los selectores de CSS anidados. También, es una herramienta que permite personalizar las reglas y nomenclatura para tener un código mucho más limpio y escalable.
Recursos de imágenes: https://www.spacex.com
Si quieres aprender todo lo necesario para convertirte en Frontend Developer construyendo un proyecto profesional desde cero, te espero en el Curso de Frontend Developer en Platzi.
Muy buena explicacion de como implementar BEM en CSS
Ahora Doge podrá tener su espacio organizado mas eficientemente.
No me pude resistir .
HAHAHA me encanta !!!
No es mejor hacer un curso de las metodologias aplicadas bem en proyectos. Seria bueno.
Uffff 🔥 con toda seguridad el team lo tendrá en cuenta ! Gracias Randyyy 💚🚀✨
Muy bueno! estaba haciendo algunas cosas mal con BEM porque no lo tenia muy claro, ahora estoy al 100 ✓✓✓ y usarlo con SASS es lo mejor de todo 💚
Aiñ ! Me alegra mucho Sebas !!! 💚🚀✨
Solamente falto el dinosaurio que llevaban.
Hahahah ! awwwww, es ciertoooo… el mejor dino del mundo viajando al espacio 💚🚀✨ !
Excelente__Explicación–teff
Hahaha ! Graciasss mil Axeeel 💚🚀✨
Gracias Teff.
Excelente artículo. Lo estoy poniendo en práctica en este momento para una un proyecto de un reto Platzi en el que estoy participando.
Wow !!! Feliz de ver el resultado de tu proyecto Gustavoooo 💚🚀✨
Muchas gracias por este post, me sirvió para aclarar las dudas sobre que hacer con la sintaxis en bloques anidados.
Maravillosooooo 💚🚀✨Me alegra muchísimo !!!
Lo de SpaceX fue buen ejemplo
🥰✨🚀
Excelente post!
Gracias Rigooo 💚🚀✨
habia pasado varios cursos y aún no entendía como usar el BEM, muchas gracias, muy bien explicado
Aiñ ! Con todo el gustooo 💚🚀✨
Gracias Teff, excelente explicación.
Tenía dudas con esta metodología pero ahora me siento más seguro con todos los ejemplos que pusiste.
Maravilloso Ulises… Me alegra mucho leer esooo 💚🚀✨
Buen post!
Graciasss Fabriiii 💚🚀✨
Excelente artículo mi estimada @teffcode. Como todo lo que haces. Verdaderamente dedicada en todo. Ya esta agregado a mis notas
Aiñ !!! Maravillosoooo 💚🚀✨
Ame este post. Realmente lo necesitaba
Estaba aplicando algunas cosillas mal. Ahora lo entendí mejor y puedo aplicarlo en mi proyecto aprovechando que estoy reescribiendo codigo xD ❤️
Wow, maravillosooooo esto Darkusss 💚🚀✨
¡Excelente artículo! Vengo usando BEM hace un tiempo, pero reconozco que algunos usos no los tenía tan claros y sigo repitiendo algunos de los errores mencionados.
Estoy practicando para reforzarlo, usado junto a SASS es magia pura 🌠🌠🌠🌠🌠
Maravilloso !!! Siempre estamos en constante aprendizaje 💚 Me alegra mucho que lo estés practicando para reforzarlo 💪🏼
¡Oh, Teff! No sé si vas a leer esto también pero quiero enviarte mi agradecimiento y mi admiración por tus cursos, los quizzes de github y todo el cariño y la dedicación que le pones a lo que haces.
Muchísima gracias 😄
Mes estaba rompiendo la cabeza haciendo mi pagina con bem jajajaja
no entendia bien lo de los hijo nietos y tataranietos estaba haciendo esto
Ahora entiendo mejor gracias a tus tips y demas blogs que e visitado
TE AMO BEM, TE AMO.
Muy bueno el post. Super bien explicado.
Justo había terminado el curso de Frontend! usaré este blog para complementar mis apuntes 😍
Muy bueno! alguien ya replico esto en GitHub?
Sería súper !!! 💚🚀✨
Que bueno post, ahora me di cuenta que lo estaba haciendo mal. Gracias! Es hora de mejorar ese css jajaa
Que alternativas a BEM existen?
Hay un par de errores en algunos códigos al parecer no aparecen algunos símbolos “<” o “>” o están mal cerrados y en unas partes al final menciona Javascript en vez de CSS.
Fuera de eso excelente explicación! gracias por tomarse el tiempo de ejemplificar todo.
Super!💚
Gracias
Me encantó esta guía, por fin me queda claro BEM porque nunca entendí bien para qué era lo del modificador y las pocas veces que intenté implementar esta metodología caía en el error de representar los anidamientos de HTML en las clases. Muchas gracias por la guía Teff 😊
Gracias por esta excelente guía de BEM 😃
Muy buena explicación profesora Teff.
Muchísimas Gracias
Waooo mil gracias, que buen aporte!
Excelente explicación del uso en casos prácticos de la metodologia Bem
Hora si entiendo la metodologia bem
Madre del amor hermoso desde mañana comienzo a escribir todo mi CSS con BEM
Muy excelente todas tus clases, la didáctica es muy agradable en tus cursos, excelente aporte para reforzar el tema
Exelente
Me gusto mucho la explicación, seguirè aprendiendo màs de BEM, gracias.
Excelente guía! Ya estaba algo familiarizado pero estos must y must not y hacks son oro! 🤗🤩
Excelente explicación.
Hola a todos, como están?.
Disculpen, tengo una pequeña duda con respecto a la parte en la que se trata el tema de como se deberían utilizar los modificadores; que dice lo siguiente: "Lo que sí: dejar la clase principal card y añadir otra clase con modificador. ". Mi duda radica al trabajar BEM en conjunto con SASS, allí podemos hacer uso de la característica “@extends” y de esa manera “heredar” estilos que se encuentren aplicados a otro selector, sin tener que agregar al elemento HTML correspondiente otro valor class.
.
Acá mi pregunta ¿Al utilizar @extends de SASS debería aun así agregar ambos valores class, la principal y la del modificador; sabiendo que con @extends es suficiente que agregue solo la del modificador?.
.
Gracias por tomarse el tiempo de leer mi pregunta.
Voy enterándome de esto, pero la verdad que bueno saberlo!
Excelente explicación. Todo quedó muy claro. Gracias Teff!!
¡Encantada con este post !😊🤗 lo aplicare a mis proyectos. Muchas gracias missTeff💪🤗🤗💚
Increíble post 😍
😀 😃 😄 😁
😀 😃 😄 😁
😀 😃 😄
Muy buena explicación!! gracias
Muchísimas gracias Teff por compartir, muy buena explicación 💚.
No puedo aportar más que decir gracias!
Aunque mi foco no es Front! De verdad es una herramienta tener este post bien clarito!
Muchas gracias!
Buen blog es una forma de nombrar las clases, es bastante simple e intuitiva
teffcode
Gracias!
El entendimiento hacia la implementanción de BEM en CSS y sus preprocesadores va mucho mejor gracias a esta explicación.
Espero el curso de BEM + SASS y todas sus buenas prácticas. Sin duda agregaría mucho valor a los Actuales y Futuros Frontend Developers!
Son pocos los articulos que he leido que son tan bien explicados y al punto, Muy buen contenido! 🙌🏻
La mejor prueba de que uno nunca deja de aprender, incluso en algo que se pensaba dominado
Excelente explicación profe, me quedó clarísimo! 😃
Excelente aporte, es importante mantener congruencia a la hora de desarrollar proyectos.
Me resulto muy útil el post!
Sobre todo la aclaración de que BEM no representa los niveles de HTML; había intentado implementarlo mal, y me quedaban clases super extensas
Excelente!
Muy claro esta metodológia BEM, Gracias @teffcode!!
De hecho en Chrome ya va a estar disponible esa funcionalidad: La de agregar
&
y anidar clases en css. En otras palabras, ahora vamos a poder escribir css como si fuera en SASS de manera nativa. Aunque esto solo estara disponible para Chrome, espero que los demás navegadores se adapten rápido…Gracias buen dato y como usar bem. Justo usaba los modifier en html sin darme cuenta para que servía ahora quedo claro. =)
Excelente ! Deberia de haber un curso especifico sobre BEM y SASS impartido por usted 😌
Muy buena explicación Profe teff
Llevo apenas una semana estudiando metodología BEM y este artículo es el mas claro que he visto, muy útil para aplicar a nuestros proyectos