BEM (Block, Element, Modifier) es la metodología más adoptada para escribir CSS escalable y mantenible. Aprende su convención de nombres y estructura para proyectos de cualquier tamaño.
Diagrama de la estructura BEM para nombres de clases
Contenido del Artículo
Fundamentos de BEM
Estructura básica de la metodología:
<!-- HTML Estructura BEM -->
<article class="card card--featured">
<header class="card__header">
<h2 class="card__title">Título</h2>
<span class="card__badge">Destacado</span>
</header>
<div class="card__body">
<p class="card__text">Contenido...</p>
<button class="card__button card__button--primary">Acción</button>
</div>
</article>| Concepto | Sintaxis | Descripción | Ejemplo |
|---|---|---|---|
| Block | .block | Componente independiente | .card, .menu |
| Element | .block__element | Parte de un block | .card__title, .menu__item |
| Modifier | .block--modifier | Variación de un block | .card--featured, .menu--vertical |
| Element Modifier | .block__element--modifier | Variación de un elemento | .card__button--disabled |
Mejores Prácticas
Convenciones para implementación profesional:
Sin anidamiento
Evitar selectores como .card .card__title
Independencia
Blocks no deben depender de otros blocks
Nomenclatura clara
Usar nombres semánticos en inglés
Sin estilos globales
Todo estilo vinculado a clases BEM
/* CORRECTO - Estilos BEM */
.card { /* Block */ }
.card__title { /* Element */ }
.card--featured { /* Modifier */ }
/* INCORRECTO */
.card .title { /* Anidamiento innecesario */ }
.card-featured { /* Modificador sin guión doble */ }
.card__title--large--red { /* Múltiples modificadores */ }BEM Moderno
Técnicas avanzadas para proyectos actuales:
/* BEM con CSS Variables */
:root {
--card-bg: #fff;
--card-padding: 1.5rem;
}
.card {
background: var(--card-bg);
padding: var(--card-padding);
}
.card--dark {
--card-bg: #333;
}
/* BEM con metodologías complementarias */
.card__button /* BEM */
@apply px-4 py-2 rounded; /* Tailwind utility classes */
/* BEM en preprocesadores */
.card {
&__header { /* SCSS nesting */
display: flex;
&--centered {
justify-content: center;
}
}
}Combina BEM con CSS Variables para componentes altamente personalizables y temáticos
