Resumen

  • El primer borrador público CSS Variables del W3C, del 10 de abril de 2012, partió del problema de repetir valores por una hoja de estilos. Su sintaxis temprana empleaba var-color y referencias como var(color), sujetas a la cascada.
  • La Recomendación Candidata del 3 de diciembre de 2015 utilizó --main-color y var(--main-color). El texto candidato del 16 de junio de 2022 explicó reservas y referencias ausentes o circulares. Un color compartido podía circular por el árbol mientras una sección establecía el suyo.

Alguien pidió un granate un poco menos grave. El tono estaba en un botón, cuatro enlaces, un recuadro y un título que llevaba tres rediseños sin presentarse a revisión. Encontrar una copia era fácil. Encontrar todas exigía registrar los cajones de la oficina. Si una quedaba intacta, la página parecería una reunión en la que varios asistentes no habían leído la circular. Las variables CSS ofrecieron un mensajero: nombrar el valor y dejar que los elementos lo solicitaran por su nombre.

El primer borrador público CSS Variables del W3C, de 10 de abril de 2012, describió el problema de los valores repetidos. En archivos grandes, un simple buscar y reemplazar puede tocar apariciones que no pertenecen al mismo diseño o dejar otras fuera. La propuesta permitía definir propiedades con nombres elegidos por el autor y usarlas dentro de valores CSS ordinarios. El ejemplo situaba un color cerca de la raíz. Sus descendientes podían recibirlo según las reglas normales de la cascada. Era una distribución con destinatarios, no una máquina que cambiaba texto por toda la carpeta.

Aquella versión hablaba otro dialecto. Escribía var-color y leía var(color). Una regla para un div podía definir un color distinto del de la raíz; una alerta podía volver a cambiarlo. El mismo nombre llevaba valores diferentes según dónde estuviera el elemento. La oficina central emitía el aviso, pero un departamento local podía enviar una corrección. La variable resultaba útil precisamente porque tenía alcance, herencia y excepciones.

El borrador también describía un conflicto de familia: dos variables que se pedían mutuamente una respuesta. Si una depende de la otra y la segunda vuelve a la primera, el cálculo forma un círculo y los valores son inválidos. Ningún botón hallará al final una tonalidad secreta; el círculo no tiene final. El navegador resuelve las dependencias y la declaración que solicitó ese valor afronta el resultado. Poner nombres a los colores redujo copias dispersas, pero hizo visibles nuevas relaciones que podían romperse.

La Recomendación Candidata del W3C del 3 de diciembre de 2015 ya usaba la escritura reconocible: --main-color para definir una propiedad personalizada y var(--main-color) para leerla. Su ejemplo ponía un color principal en la raíz y lo utilizaba en varios lugares, incluido un fondo derivado. Al cambiar el valor con nombre, los usos dependientes cambiaban con él. La redacción podía retocar el granate sin salir a buscar cada botón como si fuera un expediente perdido.

La cascada seguía decidiendo a quién llegaba el aviso. Un componente con su propio --main-color entregaba a sus descendientes la versión local. La web podía conservar el granate y un panel de suscripción escoger el verde azulado. Para entender un color inesperado, encontrar la primera declaración del nombre es apenas el comienzo. Hay que mirar qué declaración vence para el elemento concreto después de la cascada y la herencia. El destinatario importa tanto como la dirección desde la que se envió la circular.

El texto candidato del W3C del 16 de junio de 2022 explicó la salida para un componente que no recibe ningún color. En var(--header-color, blue), el segundo argumento ofrece una reserva. Un módulo reutilizable lleva su propia opción mientras acepta que la aplicación anfitriona le entregue otra. La especificación advierte que esa reserva puede contener comas: se toma como tal todo lo que sigue a la primera coma separadora. El invitado trae chaqueta, aunque se pone la de la casa si se la prestan.

Las referencias ausentes y circulares se descubren al calcular el valor. El navegador puede leer una declaración con var() sin conocer aún lo que sustituirá por ella. Si la propiedad elegida falta o se invalida y no hay una reserva útil, la declaración dependiente pierde el resultado que pretendía. En una revisión visual conviene preguntar qué ocurrió en ese elemento: heredó el nombre general, recibió una definición local, recurrió a su reserva o perdió una declaración. La respuesta está en el estilo calculado, no en la primera línea que devolvió una búsqueda.

Los documentos también muestran un cambio real de vocabulario. En 2012 aparecían var-color y var(color). En 2015 la pareja era --main-color y var(--main-color). El texto de 2022 desarrollaba con más detalle las reservas y los valores inválidos. Son tres momentos de una idea que fue tomando forma, no una sola receta inmóvil. Lo que perdura es la posibilidad de nombrar un valor, dejarlo bajar por la cascada y permitir que una rama del documento responda con el suyo.

La redacción ganó una decisión más interesante que reemplazar caracteres. ¿En qué nivel pertenece el granate compartido? ¿Qué panel merece una excepción? ¿Qué módulo necesita un color de reserva para funcionar fuera de la casa? El navegador se encarga de distribuir y calcular. El editor decide si el resultado sigue pareciendo una publicación con identidad propia. Los botones, por su parte, ya no pueden alegar que nunca recibieron el aviso.