Hoy vamos a hablar de BEM y como funciona en CSS.
¿Qué es BEM?
BEM: La metodología BEM (bloque, elemento, modificador) es una forma de escribir selectores CSS de forma más rápida y sin tener que repetir el código.
Se divide en tres reglas:
- Bloque: Es el contenedor de los demás elementos.
- Elemento: Son las etiquetas de dentro de un bloque.
- Modificador: Es una clase que diferencia a ese elemento de otro.
Más adelante veremos esto en profundidad.
Ahora haremos un pequeño repaso a los selectores CSS para que puedas entender más fácilmente BEM.
Por ejemplo tenemos esta web:
<section class="cards">
<div class="card">
<h3>Tarjeta 1</h3>
<p>Contenido tarjeta 1</p>
<a href="#">Web Victor Robles</a>
</div>
<div class="card">
<h3>Tarjeta 1</h3>
<p>Contenido tarjeta 1</p>
<a href="#">Web Victor Robles</a>
</div>
<div class="card warning">
<h3>Tarjeta 1</h3>
<p>Contenido tarjeta 1</p>
<a href="#">Web Victor Robles</a>
</div>
<div class="card">
<h3>Tarjeta 1</h3>
<p>Contenido tarjeta 1</p>
<a href="#">Web Victor Robles</a>
</div>
</section>
Para aprender a usar BEM primero necesitamos saber que es el selector de contexto y el key selector.
Por ejemplo si queremos darle estilos a esta página normalmente usaríamos estos selectores:
1. section.cards{}
2. section.cards div.card{}
3. section.cards div.card h3{}
4. section.cards div.card p{}
5. section.cards div.card a{}
6. section.cards div.card.warning{}
En el primer selector no hay selector de contexto, solo hay key selector que sería esto:
section.cards
En él segundo selector esta parte seria el selector de contexto:
section.cards
Y esto sería el key selector:
div.card
En el tercer selector esta parte seria el selector de contexto:
section.cards div.card
Y esto sería el key selector:
h3
En el selector 4 y 5 el selector de contexto y key selector son los mismos que en el selector 3.
En resumen el selector de contexto es para indicarle donde se encuentra la etiqueta a la que vamos a aplicar los estilos (key selector) y key selector seria la etiqueta a la que se van aplicar los estilos o las diferentes propiedades de css.
Ahora bien si quisiéramos cambiarle el color a la etiqueta p como mínimo tendríamos usar este selector:
section.cards div.card p
o este, reduciendolo al maximo:
.cards .card p
Es decir tendríamos que repetir todo en selector entero o hacerlo más específico, a la larga el código se hará complejo, es muy importante nunca usar el “!important” en nuestros estilos, ya que la pagina será más difícil de mantener y escalar.
¿Cómo funciona BEM para maquetar webs mejor?
Aquí es donde entra BEM, vamos a hacer el HTML anterior con BEM:
<section class="cards">
<div class="cards__card">
<h3 class="card__title">Tarjeta 1</h3>
<p class="card__content"> Contenido tarjeta 1</p>
<a href="#" class="card__link">VictorRoblesWeb</a>
</div>
<div class="cards__card">
<h3 class="card__title">Tarjeta 2</h3>
<p class="card__content"> Contenido tarjeta 2</p>
<a href="#" class="card__link">VictorRoblesWeb</a>
</div>
<div class="cards__card cards__card--warning">
<h3 class="card__title">Tarjeta 3</h3>
<p class="card__content"> Contenido tarjeta 3</p>
<a href="#" class="card__link">VictorRoblesWeb</a>
</div>
<div class="cards__card">
<h3 class="card__title">Tarjeta 4</h3>
<p class="card__content"> Contenido tarjeta 4</p>
<a href="#" class="card__link">VictorRoblesWeb</a>
</div>
</section>
La clase cards sería un bloque no recibe ningún cambio. El div card ahora su clase es cards__card, sería una combinación entre el nombre del bloque donde se encuentra y del elemento (bloque__elemento), siempre entre medias tendrá que tener doble guion bajo. De esta forma se definirían los elementos en BEM.
El modificador sería la clase warning, ahora ha quedado así, cards__card—warning, sería una combinación entre el nombre del bloque donde se encuentra, del elemento y del modificador (bloque__elemento--modificador), siempre cuando definamos los modificadores hay que poner doble guion.
Ahora vamos a ponerlo en práctica en el CSS:
.cards{}
.cards__card{}
.cards__card—warning{}
.card_title{}
.card__content{}
.card__link{}
Así con BEM, para seleccionar elementos del DOM en CSS, solo será necesario utilizar clases, ya no es necesario usar las etiquetas, si nos fijamos ahora todos los selectores únicamente son key selector a los cuales aplicarles directamente los estilos.
Con esto nos quedaría un código más corto, limpio, mantenerle y a la hora de hacer modificaciones y maquetar en general será más sencillo trabajar con selectores.
Nos seguimos viendo en mis cursos de desarrollo, en este blog y en mi canal de YouTube 😉
