Revision de Arquitectura CSS

El Problema

CSS crece hasta convertirse en un pantano inmantenible mas rapido que cualquier otro lenguaje. Los desarrolladores sobreescriben especificidad con !important en vez de corregir la cascada. Valores de pixeles y colores hex hardcodeados se dispersan por cientos de archivos. El resultado: una hoja de estilos donde nadie se atreve a borrar una regla, y cada nueva funcionalidad requiere selectores cada vez mas bizarros para ganar la guerra de especificidad.

El Prompt

Revisa la siguiente arquitectura CSS. Actua como un ingeniero de design systems evaluando escalabilidad, consistencia y mantenibilidad.

METODOLOGIA: [ej. BEM, Tailwind, CSS Modules, styled-components, CSS vanilla]
DESIGN SYSTEM: [ej. tokens custom, Tailwind config, tema Material UI]

CODIGO CSS/ESTILOS:
[pegar hojas de estilo, estilos de componentes o config Tailwind]

CODIGO HTML/COMPONENTE (para contexto):
[pegar markup relevante]

Evalua en estas dimensiones:

1. **Gestion de Especificidad**
   - Hay declaraciones !important? Por que?
   - Los selectores son razonablemente planos (max 2-3 niveles)?
   - Se usan IDs para estilizar?
   - La cascada es predecible o una guerra de especificidad?

2. **Cumplimiento de Design Tokens**
   - Colores, espaciado, tipografia y sombras usan tokens/variables?
   - Hay valores hex, tamanos en pixeles o rgba hardcodeados?
   - El tema puede cambiarse solo cambiando valores de tokens?

3. **Estrategia Responsive**
   - Se usa enfoque mobile-first (media queries min-width)?
   - Los breakpoints son consistentes y usan design tokens?
   - Los layouts usan tecnicas modernas (Grid, Flexbox), no floats?
   - Los targets tactiles son al menos 44x44px en movil?

4. **Patrones de Layout**
   - CSS Grid y Flexbox se usan apropiadamente (Grid para 2D, Flex para 1D)?
   - Las utilidades de layout son reutilizables o copy-pasted por componente?

5. **Rendimiento**
   - Se evitan selectores costosos (universal *, descendientes profundos)?
   - Las animaciones usan transform/opacity (aceleradas por GPU)?

6. **Consistencia**
   - La convencion de nombres se sigue consistentemente?
   - Hay CSS muerto/duplicado que puede consolidarse?

Para cada problema, proporciona:
- **Ubicacion**: Archivo y selector
- **Severidad**: Roto (bug visual) / Deuda / Inconsistente / Optimizacion
- **Problema**: Que hace este CSS problematico
- **Fix**: CSS corregido con explicacion

Ejemplo de Salida

## Revision de Arquitectura CSS: 5 problemas encontrados

### Deuda: Colores Hardcodeados en Todo
Ubicacion: 23 archivos contienen valores hex como #3b82f6, #1f2937
Fix: Definir tokens y reemplazar:
  :root { --color-primary: #3b82f6; --color-text: #1f2937; }
  /* Antes */ color: #3b82f6;
  /* Despues */ color: var(--color-primary);

### Roto: Media Queries Desktop-First
Ubicacion: src/styles/header.css
Fix: Cambiar a mobile-first:
  .nav { flex-direction: column; }
  @media (min-width: 768px) { .nav { flex-direction: row; } }

Cuando Usar

Ejecutar al revisar PRs de CSS, al configurar un design system, o cuando los estilos se sienten cada vez mas dificiles de cambiar.

Tips Pro

• Incluir estructura HTML — los problemas de CSS frecuentemente vienen de la estructura HTML. Una sopa de divs fuerza selectores complejos.
• Pedir plan de extraccion de tokens — “Extrae todos los valores hardcodeados a un sistema de design tokens con script de migracion.”
• Auditar con alcance — para proyectos grandes, revisar una pagina o grupo de componentes a la vez.