¿Cómo identificar bloques, elementos y modificadores en BEM?
En el mundo del desarrollo web y CSS, la metodología BEM (Bloque, Elemento, Modificador) es esencial para organizar y mantener limpias las hojas de estilo. Aquí te guío para identificar las diferentes partes de un componente con algunos ejemplos prácticos.
¿Qué es un bloque en BEM?
El bloque es la unidad principal de la metodología BEM. Es un contenedor independiente que no depende de otro bloque ni actúa como elemento de ningún bloque.
- Ejemplo 1: En una tarjeta (
cart
), el bloque sería la tarjeta misma: <div class="cart">
.
- Ejemplo 2: Para un
navbar
, el bloque es el componente superior que envuelve todo el contenido.
¿Cuál es la función de los elementos en BEM?
Los elementos son partes de un bloque que solo tienen sentido en el contexto de ese bloque y no pueden existir de manera independiente.
- Ejemplo 1: En la tarjeta (
cart
), los elementos incluyen <img class="cart__image">
y <p class="cart__text">
.
- Ejemplo 2: Con un
navbar
, los elementos podrían incluir el logo o los ítems: <div class="navbar__logo">
.
¿Qué rol juegan los modificadores en BEM?
Los modificadores son utilizados para cambiar aspectos visuales o de comportamiento de un bloque o elemento mediante clases adicionales.
- Ejemplo 1: En el caso del
navbar
, un ítem con un color específico podría tener un modificador como navbar__item--gray
.
- Ejemplo 2: En el ejemplo de la tarjeta podríamos imaginar un modificador como
cart--primary
para una versión destacada.
Buenas prácticas y errores comunes en BEM
¿Cuáles son las buenas prácticas al usar clases en BEM?
- Mantén siempre la clase principal del bloque: Añade otras clases para modificadores, sin reemplazar la clase del bloque.
- Evita representar niveles de profundidad en HTML con BEM: No confundas las hierarquías de HTML con la estructura BEM.
- Incluye la clase para cada hijo que requiera estilos específicos: Define clases para cada hijo independientemente de la profundidad del HTML.
¿Qué errores debemos evitar en la metodología BEM?
- No uses clases de modificador solas como principales: Evita usar solo modificadores como
cart--flat
sin el bloque correspondiente.
- No abuses de las jerarquías dentro de BEM: No caigas en construir clases como
cart__text__icon
, ya que va contra la filosofía simple de BEM.
- Evita omitir clases necesarias: Asigna clases a todos los elementos que requieran estilos, incluso si parecen redundantes.
¿Cómo estructurar el HTML correctamente con BEM?
Al implementar BEM en HTML, es crucial seguir una estructura clara para asegurar la eficiencia y el mantenimiento del código.
<div class="cart">
<img class="cart__image" src="ruta/a/imagen.jpg" alt="Descripción de imagen">
<p class="cart__text">Contenido del texto</p>
</div>
<nav class="navbar">
<div class="navbar__logo">Logo</div>
<ul class="navbar__list">
<li class="navbar__item navbar__item--active">Inicio</li>
<li class="navbar__item">Servicios</li>
<li class="navbar__item navbar__item--gray">Contacto</li>
</ul>
</nav>
Recuerda que la claridad, la consistencia y el compromiso con las normas de BEM ayudarán a que tu trabajo en equipo sea más fluido y tu código más legible. A medida que sigues aprendiendo y practicando, estas técnicas de BEM se convertirán en una segunda naturaleza para ti. ¡Sigue explorando y mejorando tus habilidades en CSS!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?