El artículo de Andrey Yamanov explora un problema común en el desarrollo CSS: la impredecibilidad de la resolución de estados de los componentes. Cuando se trabaja con componentes simples, la cascada y la especificidad de CSS suelen ser manejables. Sin embargo, a medida que se añaden más estados (hover, active, disabled, dark mode, breakpoints, data attributes, container queries, overrides), la resolución de estos estados se vuelve compleja y propensa a errores. El autor describe esta situación como una “resolución de sistema en la cabeza”, donde los desarrolladores deben mantener mentalmente el orden de precedencia de las reglas CSS para evitar conflictos inesperados y asegurar un comportamiento consistente.
El problema se ilustra con un ejemplo sencillo: un botón que se vuelve azul cuando está tanto en estado hover como disabled, debido al orden de las reglas CSS. Este ejemplo, aunque pequeño, representa un problema mayor: la fragilidad de los componentes CSS cuando los estados se superponen de formas no triviales. La dificultad no reside en escribir la primera versión de un componente, sino en extenderlo y modificarlo sin romper la lógica de resolución de estados.
Para solucionar este problema, el autor ha desarrollado Tasty, un sistema que permite expresar los estados de un componente de forma declarativa. En lugar de escribir selectores CSS que compiten entre sí, Tasty utiliza un mapa de estados que define las posibles apariencias de un componente en cada estado. Tasty luego compila este mapa en selectores que son mutuamente excluyentes, eliminando la posibilidad de conflictos y garantizando un orden de precedencia claro. Por ejemplo, si se define que el estado 'disabled' tiene prioridad, Tasty generará selectores que aseguren que ese estado siempre se aplique antes que otros.
Tasty no solo simplifica la escritura y el mantenimiento de CSS, sino que también facilita la extensión de los componentes existentes. Al definir explícitamente la prioridad de los estados, se evita la necesidad de rederivar la lógica de los selectores cada vez que se añade una nueva característica o se modifica un estado existente. El desarrollo de Tasty ha sido un proceso iterativo que ha requerido años de trabajo y la resolución de desafíos técnicos y conceptuales, incluyendo el manejo de pseudo-clases, media queries, container queries y la integración con sistemas de diseño existentes. El autor enfatiza que Tasty no es una solución para todos los casos; para proyectos pequeños, CSS tradicional puede ser suficiente. Sin embargo, para sistemas de diseño complejos y componentes que requieren un alto grado de previsibilidad y mantenibilidad, Tasty ofrece una alternativa valiosa.