CSS

Arquitectura CSS: metodologías, capas y decisiones de equipo

Aprende a estructurar CSS para proyectos reales: convenciones de nombres, cascade layers, límites por componente y un flujo de revisión que evita deuda técnica.

¿Cuánto sabes de CSS?

📘 Teoría

Claves teóricas

Ideas de profe para aplicar desde hoy sin sobrecomplicar.

🏗️ Piensa en capas, no en parches

Si cada fix compite por especificidad, el proyecto se rompe por dentro. Revisa primero cascada y después aplica @layer para definir prioridades explícitas.

🧩 BEM no es moda, es contrato

BEM te obliga a nombrar intención (bloque, elemento, modificador) y evita selectores frágiles tipo .sidebar ul li a.active. Referencia oficial: getbem.com.

🧱 CSS Modules: aislamiento por defecto

Cuando el proyecto es de componentes (React/Astro), CSS Modules reduce colisiones de clase y facilita borrar código muerto sin miedo.

⚡ Utility-first bien planteado

Tailwind acelera, pero exige disciplina semántica en componentes y convenciones de composición. Si quieres reforzarlo, enlaza con la lección de Tailwind.

🛡️ El enemigo real: la especificidad

Arquitectura buena = especificidad predecible. Para selectores complejos, apóyate en :is(), :where(), :has(), :not() sin convertir cada regla en un puzzle.

📦 Estructura de carpetas que escala

Separa base, layout, components, utilities y themes. Tu yo futuro te lo va a agradecer cuando el CSS pase de 500 a 15.000 líneas.

🔍 Revisión técnica antes de merge

Checklist mínimo: ¿rompe móvil?, ¿subió especificidad?, ¿duplica reglas existentes?, ¿hay tokens repetidos?, ¿afecta accesibilidad?

🧭 Regla de oro de equipo

Primero consistencia, luego preferencia personal. Documenta el estándar y evita guerras de estilo en PRs.

Mapa de una arquitectura CSS mantenible

Un modelo simple para decidir dónde vive cada regla.

Una arquitectura sana separa responsabilidades: base global, layout, componentes, utilidades y temas. Cuando mezclas todo en un archivo, la cascada se vuelve impredecible.

No necesitas dogmas. Puedes mezclar BEM en componentes, utilidades para excepciones y @layer para ordenar prioridades, siempre que el equipo comparta reglas claras.

Base: reset, tipografía y defaults globales.
Layout: grid general, contenedores y regiones.
Components: botones, cards, nav, formularios.
Utilities: clases atómicas para ajustes puntuales.
Themes: variaciones de marca o modo oscuro.

BEM, CSS Modules y Utility-first: cuándo usar cada uno

BEM funciona muy bien en equipos donde el HTML es compartido entre perfiles distintos y necesitas nombres legibles sin tooling especial.

CSS Modules encaja perfecto cuando trabajas por componentes y quieres aislamiento automático.

Utility-first destaca cuando priorizas velocidad de implementación y consistencia visual guiada por design tokens.

Comparativa de estilo (mismo botón)

/* BEM */
.btn {}
.btn--primary {}

/* CSS Module (conceptual) */
.button {}
.buttonPrimary {}

/* Utility-first (HTML) */
/* class="px-4 py-2 rounded-lg bg-blue-600 text-white" */

Cascade Layers en proyectos reales

Define prioridad por intención, no por accidente.

Con @layer puedes fijar el orden de la cascada antes de escribir reglas. Esto reduce la necesidad de subir especificidad o usar !important.

La clave es declarar el orden una vez y respetarlo en todo el proyecto.

Orden de capas recomendado

@layer reset, base, components, utilities, overrides;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}

@layer base {
  body { margin: 0; font-family: system-ui, sans-serif; }
}

@layer components {
  .card { border-radius: 12px; border: 1px solid #e2e8f0; }
}

@layer utilities {
  .u-hidden { display: none !important; }
}