Estilos CSS y temas en Vaadin 14

Mon, 11 May 2020 15:14:57 +0000

Hace una semana fue publicada la nueva version LTS del framework de presentación.
Mientras es posible encontrar toda la información de las nuevas caractrísticas en el sitio oficial, me gustaría hacer foco en una característica en particular, a la que yo encuentro muy interesante: el manejo de estilos.
A lo largo de los años vimos diferentes maneras de administrar los estilos en las aplicaciones Vaadin.
En Vaadin 6 se podian modificar los estilos usando CSS simple. Por supuesto, tenías dos opciones: construir todo desde cero o heredar alguno de los temas ya integrados como Reindeer, Runo o Chameleon. Ese esquema de herencia se basó en la sentencia @import de CSS, que es la base del comportamiento en cascada de los estilos CSS.
El problema con este enfoque es que dificulta la personalización por la complejidad del DOM renderizado y la falta de variables que pudieran ayudar a modificar ciertos aspectos de los temas base como tamaño y el espaciado, que varias reglas tenían en común.

UX on Flowing Code

Estilos CSS y temas en Vaadin 14