CSS ya no es determinista y esto lo cambia todo 🤯
Durante décadas, aceptamos que CSS era predecible: si definías un color, ese color no cambiaba. Pero la naturaleza no es predecible, y nuestras interfaces tampoco deberían serlo. El problema es que para crear experienci
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo web
Fuente
dev.to
Puntos clave
- Durante décadas, aceptamos que CSS era predecible: si definías un color, ese color no cambiaba. Pero la naturaleza no es predecible, y nuestras interfaces tampoco deberían serlo.
- El problema es que para crear experiencias orgánicas —como fondos dinámicos o micro-interacciones naturales— hemos tenido que luchar contra el lenguaje.
- Para lograr aleatoriedad, recurrimos a hacks:
- Sass generaba valores aleatorios, pero quedaban congelados en la compilación. PHP lo hacía en el servidor, pero era estático tras la carga. Finalmente, JavaScript lo resolvió, pero a un costo arquitectónico alto.
Bloque 1
Durante décadas, aceptamos que CSS era predecible: si definías un color, ese color no cambiaba. Pero la naturaleza no es predecible, y nuestras interfaces tampoco deberían serlo.
El problema es que para crear experiencias orgánicas —como fondos dinámicos o micro-interacciones naturales— hemos tenido que luchar contra el lenguaje.
Bloque 2
Para lograr aleatoriedad, recurrimos a hacks: Sass generaba valores aleatorios, pero quedaban congelados en la compilación. PHP lo hacía en el servidor, pero era estático tras la carga. Finalmente, JavaScript lo resolvió, pero a un costo arquitectónico alto.
El insight clave aquí es la "Regla del Menor Poder": debemos resolver el problema con el lenguaje menos potente que sea capaz de hacerlo. Usar un motor imperativo como JS para una decisión de layout es, sencillamente, ineficiente.
Bloque 3
La llegada de las funciones nativas de aleatoriedad cambia las reglas del juego:
• random(): genera valores entre un mínimo y un máximo de forma nativa. • random-item(): selecciona elementos de una lista sin salir del stylesheet. • Pureza arquitectónica: el layout vuelve a CSS y la lógica se queda en JS.
Bloque 4
No estamos ante una simple actualización de sintaxis. CSS está evolucionando de ser un lenguaje de estilos a convertirse en un sistema de layout generativo.
Es el fin de delegar la estética al motor de lógica y el inicio de interfaces que se sienten vivas y únicas por diseño.
Bloque 5
¿Siguen delegando la aleatoriedad de la UI a JavaScript o ya están integrando estas funciones nativas en sus arquitecturas?