El problema del CSS que crece

Tu CSS funciona de maravilla... hasta que el proyecto crece. Entonces aparecen los síntomas: cambias un color y se rompe otra cosa, peleas con la especificidad a punta de !important, y nadie —ni tú— se atreve a borrar una regla por miedo. Este módulo es sobre ARQUITECTURA: organizar el CSS para que escale sin volverse un caos. Y empieza por reconocer la enfermedad.

La ciudad sin planeación urbana

Síntoma 1: la guerra de especificidad

Cuando un estilo "no se aplica", la reacción instintiva es subir la especificidad. Y ahí empieza la escalada:

/* alguien escribe: */
.boton { background: blue; }

/* no se aplicó (otra regla gana), así que subo la especificidad: */
.barra .boton { background: green; }

/* sigue sin ganar, subo más: */
#header .barra .boton { background: red; }

/* me rindo y uso el arma nuclear: */
.boton { background: purple !important; }

Cada línea es un parche que ENTIERRA el problema en vez de resolverlo. El siguiente que quiera cambiar el color tendrá que pelear contra tu !important con OTRO !important. Es una carrera armamentista donde todos pierden, y el CSS se vuelve imposible de razonar.

Síntoma 2: el efecto dominó

<p class="texto">Este párrafo usa un color definido en tres lugares distintos. Cambiar "el color de la marca" obliga a buscarlo y editarlo en cada sitio — y siempre se te escapa uno.</p>
<button class="cta">Botón con el mismo violeta... ¿o era otro?</button>
<span class="etiqueta">Etiqueta con "casi" el mismo color</span>

body { font-family: system-ui; padding: 20px; background: #f8fafc; display: grid; gap: 12px; }
.texto { color: #6d28d9; max-width: 46ch; line-height: 1.6; }
.cta { padding: 10px 16px; border: 0; border-radius: 8px; background: #6e28d9; color: white; font-weight: 600; cursor: pointer; justify-self: start; }
.etiqueta { color: #6d29da; font-weight: 600; font-size: 14px; }

Mira de cerca los tres violetas del ejemplo: #6d28d9, #6e28d9, #6d29da. Son CASI iguales — errores de copiar y pegar el color a mano por todo el CSS. Cuando el color de marca vive repetido en 40 sitios, cambiarlo es una cacería propensa a errores, y acabas con "casi el mismo" violeta en media página. El valor debería vivir en UN solo lugar.

El problema es de organización, no de CSS

Mini-reto

Abre el CSS de "El Observador" (o cualquier proyecto tuyo de varios archivos) y haz un diagnóstico honesto: busca cuántas veces aparece tu color principal escrito a mano (¿son todos idénticos?), cuántos !important tienes, y si hay selectores con 3+ niveles de especificidad. Anota los números. Ese es tu "antes"; el resto del módulo es el "después".

Qué sigue

El primer pilar de la cura es centralizar los valores. La próxima lección va a fondo con las VARIABLES CSS (custom properties): definir un valor una vez y usarlo en todas partes, con scope, fallbacks, y hasta cambiarlas en vivo con JavaScript. El fin de los "casi el mismo violeta".