A medida que los proyectos crecen, el CSS vanilla sufre de alcance global — cada selector compite globalmente, brotan guerras de especificidad, y nadie se atreve a eliminar una regla. Las metodologías imponen estructura y convenciones de nombres para mantener CSS mantenible.
Una convención de nombres que hace explícitas las relaciones y mantiene la especificidad plana (todas las clases únicas):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
El valor de BEM: los nombres de clase son autodocumentados, limitados por convención, y uniformemente baja especificidad (sin guerras de nesting/id).
Compone estilos a partir de clases pequeñas de un solo propósito directamente en el markup:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
Pros: sin nombres, sin CSS no utilizado (purgado), tokens de diseño consistentes. Contras: HTML verboso. Enormemente popular por su velocidad y consistencia.
El enfoque moderno en frameworks de componentes — limita los estilos a un componente para que no puedan filtrarse:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
Esto resuelve el problema del alcance global mecánicamente en lugar de por convención.
OOCSS — separate structure from skin, reuse objects
SMACSS — categorize rules (base, layout, module, state, theme)
ITCSS — layer CSS by specificity (generic → explicit), low to high
Todos luchan contra los mismos enemigos: especificidad desbordada, colisiones de nombres, código muerto y cascadas impredecibles. Ya sea a través de nombres (BEM), utilidades (Tailwind) o alcances (Modules), mantienen CSS predecible y seguro para cambiar a escala.
Las grandes codebases de CSS se desmoronan bajo el alcance global y las guerras de especificidad sin disciplina.
Elegir y aplicar consistentemente una metodología (comúnmente BEM, Tailwind o CSS Modules limitado hoy) es lo que mantiene los estilos modulares, eliminables y libres de conflictos a medida que crecen el equipo y la codebase.