Metodología BEM: Block Element Modifier
Asigne nombres a las clases CSS con el patrón Block__Element--Modifier para crear estilos de componentes autoexplicativos, reutilizables y con baja especificidad.
Metodología BEM: Block Element Modifier es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es BEM?
BEM (Bloque, Elemento, Modificador) es una convención para nombrar clases CSS que hace que los estilos sean predecibles, reutilizables y estén libres de conflictos. Al codificar la estructura de los componentes en los nombres de clase, elimina las guerras de especificidad y las colisiones accidentales entre estilos.
Bloques: componentes independientes
Un bloque es un componente independiente y reutilizable: card, button, nav. El nombre de la clase es el nombre del bloque, escrito en minúsculas y separado por guiones.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Elementos: partes de un bloque
Un elemento es una parte de un bloque que no tiene significado por sí sola. Use dos guiones bajos: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Modificadores: variantes y estados
Un modificador cambia la apariencia o el comportamiento de un bloque o elemento. Use dos guiones: block--modifier o block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>Reglas de CSS con BEM
Las clases BEM tienen una especificidad baja e igual entre sí (una clase por selector). Esto facilita sobrescribir los estilos. Nunca use IDs ni selectores de elementos anidados, ya que aumentan la especificidad de forma impredecible.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM con Sass
El selector padre & de Sass permite escribir BEM de forma más concisa. El CSS compilado es idéntico al BEM escrito directamente.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}Cuándo crear un bloque nuevo
Cree un bloque nuevo cuando el componente pueda funcionar de forma independiente y reutilizarse en distintos contextos. Cree un elemento cuando esa parte solo tenga sentido dentro de un bloque específico.
BEM evita el anidamiento
BEM desaconseja el anidamiento profundo en HTML y CSS. Un elemento dentro de otro elemento sigue siendo block__element, no block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM y JavaScript
Use una clase independiente específica de JS como gancho para el comportamiento, con el prefijo js-. Esto desacopla los estilos de los scripts: cambiar el nombre de una clase BEM no interrumpirá el comportamiento de JavaScript.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);Mezcla de bloques BEM
Un elemento puede tener varias clases de bloque para aplicar estilos específicos según el contexto sin acoplar los bloques entre sí.
<button class="btn btn--primary form__submit">Submit</button>Limitaciones de BEM
Los nombres de clase pueden volverse largos. BEM funciona mejor en equipos grandes y sistemas de diseño donde la coherencia global de los estilos es importante. En frameworks de componentes (React/Vue) con estilos aislados, las ventajas del espacio de nombres de BEM son menos importantes.
Comprobación rápida
En BEM, ¿qué representa card__title--truncated?
Repaso: BEM
Bloque: componente independiente. Elemento (dos guiones bajos __): parte de un bloque. Modificador (dos guiones --): variante o estado. Especificidad baja e igual. Evite los selectores de ID y el anidamiento profundo. Use el prefijo js- para los ganchos de JavaScript. Sass & hace que BEM sea más conciso. Es excelente para equipos grandes y sistemas de diseño.
Preguntas frecuentes
¿La lección «Metodología BEM: Block Element Modifier» es gratis?
Sí — el texto completo de «Metodología BEM: Block Element Modifier» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Metodología BEM: Block Element Modifier»?
Asigne nombres a las clases CSS con el patrón Block__Element--Modifier para crear estilos de componentes autoexplicativos, reutilizables y con baja especificidad. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Metodología BEM: Block Element Modifier»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Metodología BEM: Block Element Modifier
- CSS Modules: nombres de clase con ámbito
- CSS-in-JS: Styled-components y Emotion
- Enfoque utility-first de Tailwind CSS