BEM: nomenclatura de bloques, elementos y modificadores
Aplique la metodología Block-Element-Modifier para crear nombres de clases predecibles y reutilizables.
BEM: nomenclatura de bloques, elementos y modificadores es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 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 CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es BEM?
BEM (Bloque–Elemento–Modificador) es una convención de nombres que crea nombres de clase autoexplicativos. Hace que los componentes CSS sean previsibles y se documenten por sí mismos.
Bloque
Un bloque es un componente de interfaz independiente y significativo que puede existir por sí solo. Es la clase raíz del componente.
<div class="card">Card block</div>
<nav class="nav">Nav block</nav>
<button class="button">Button block</button>
<form class="search-form">Search form block</form>Elemento
Un elemento es un elemento secundario de un bloque que no tiene significado fuera de este. Los elementos usan dos guiones bajos: .block__element.
<div class="card">
<div class="card__image">Image</div>
<div class="card__body">
<h2 class="card__title">Title</h2>
</div>
</div>
<nav class="nav">
<div class="nav__item"><a class="nav__link" href="#">Link</a></div>
</nav>Modificador
Un modificador es una variación o estado de un bloque o elemento. Los modificadores usan dos guiones: .block--modifier.
<button class="button button--primary">Primary</button>
<button class="button button--large">Large</button>
<div class="card card--featured">Featured Card</div>
<nav class="nav">
<div class="nav__item nav__item--active">Active Item</div>
</nav>Ejemplo completo de BEM
Un componente de tarjeta con nombres BEM:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button button--primary card__action" href="#">Read More</a>
</div>
</div>Estructura CSS de BEM
CSS correspondiente para la tarjeta BEM:
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button card__action" href="#">Read More</a>
</div>
</div>Ventaja de BEM en cuanto a especificidad
Las clases BEM son siempre clases individuales (especificidad 0,1,0). Ningún selector tiene más especificidad que otro, por lo que sobrescribir estilos es sencillo: solo tiene que añadir la clase modificadora adecuada.
Errores comunes de BEM
Evite estos errores de BEM:
- Elementos con varios niveles:
.card__body__title; aplánelos a.card__title - Elementos fuera de su bloque en HTML
- Usar selectores de elementos como
.nav__link a, lo que añade una especificidad innecesaria
BEM con propiedades personalizadas de CSS
BEM y las variables CSS se combinan de forma natural. Defina tokens a nivel de bloque que los modificadores puedan sobrescribir:
<button class="button">Default</button>
<button class="button button--danger">Danger</button>Cuándo no usar BEM
BEM es detallado y no resulta ideal para clases de utilidad o estilos puntuales. Los frameworks Utility-First como Tailwind sustituyen completamente a BEM. Use BEM para bibliotecas de componentes personalizadas en las que sea importante contar con nombres semánticos.
BEM en la práctica
Muchos sistemas de diseño utilizan variantes de BEM o esquemas de nombres similares. La sintaxis específica importa menos que el principio coherente: bloque → elemento → modificador, sin anidamiento profundo y con una especificidad plana.
Comprobación rápida
En BEM, ¿qué sintaxis representa un elemento llamado «title» dentro de un bloque «card»?
Resumen
BEM utiliza los nombres Bloque, Elemento y Modificador: .block__element--modifier. Todas las clases son clases individuales para mantener una especificidad plana e igual. Los elementos (__) pertenecen a su bloque. Los modificadores (--) crean variantes. Evite el anidamiento profundo como .card__body__title; aplánelo a .card__title.
Preguntas frecuentes
¿La lección «BEM: nomenclatura de bloques, elementos y modificadores» es gratis?
Sí — el texto completo de «BEM: nomenclatura de bloques, elementos y modificadores» 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 CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «BEM: nomenclatura de bloques, elementos y modificadores»?
Aplique la metodología Block-Element-Modifier para crear nombres de clases predecibles y reutilizables. Practicas CSS 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 CSS Academy?
No se requiere experiencia previa. CSS 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 2 de 4.
¿Cuánto tiempo toma la lección «BEM: nomenclatura de bloques, elementos y modificadores»?
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 CSS Academy?
Sí. Cada lección de CSS 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
- Por qué es importante la arquitectura CSS
- BEM: nomenclatura de bloques, elementos y modificadores
- Organización de archivos: patrones ITCSS y 7-1
- Cómo evitar las guerras de especificidad