spinner

De padres a hijos: Custom properties en producción (Parte II)

Al trabajar con componentes atómicos, nos vemos en la situación de tener componentes que alojan otros dentro de sí mismos. También nos vemos en la tesitura de que necesitamos variar o dar una serie de propiedades a estos componentes “hijos” dependiendo de su contexto dentro de los “padres”. Vamos a solucionar esto con custom properties de una manera muy sencilla.

*Este artículo es la segunda parte de «De padres a hijos: Custom properties en producción (Parte I)»

Contextualización de componentes

La orientación que se está dando a la hora de trabajar con webcomponents es la de definir nuestro estado “por defecto” en CSS declarando propiedades con custom properties sin definir. Como hemos visto anteriormente, para declarar una custom property sin definir se haría de la siguiente manera:

CSS

.text-class {
 color: var(--text-color, #121212);
 }

Recordando, al hacer esto estamos diciendo que nuestra propiedad “color” va a tener el valor de la variable “–text-color” o si no está definida, “#121212”. Este sería nuestro valor por defecto. Nuestra variable todavía no tiene ningún valor definido.

Si incluyéramos nuestro elemento con la clase “.text-class” dentro de un elemento en un contexto con un fondo oscuro, no podríamos ver correctamente el texto, ya que es un color gris oscuro, pero tenemos la capacidad de poder contextualizarlo de la siguiente manera:

CSS

.box-dark {
 background-color: black;
 --text-color: white;
 }

Así, estamos declarando que cuando tengamos un elemento con la clase “.text-class” dentro de un elemento con la clase “.box-dark”, éste tendrá su texto en blanco y podremos leerlo correctamente, todo ello sin tener que modificar nuestro elemento “hijo”, ya que como hemos visto anteriormente, nuestras custom properties entran dentro del flujo de la cascada y funcionan con herencias dentro de su scope.

Creación de un tema contextualizado

El ejemplo anterior nos lleva a un siguiente paso, tener una declaración de CSS que nos permita contextualizar nuestros componentes para que simplemente añadiendo una o dos clases a un elemento, todos los que formen parte de él estén contextualizados.

Lo que vamos a hacer es definir unas variables que vamos a usar en todos los elementos que queremos que estén contextualizados y vamos a definirlas en nuestra CSS “contextualizadora” de la siguiente manera:

CSS

.contextual-box {
 --contextual-text: black;
 background-color: white;
 }
 .contextual-box--dark {
 --contextual-text: white;
 --contextual-background: transparent;
 background-color: black;
 }

Si nos fijamos hemos declarado nuestras custom properties para el color del texto y en el caso de tener un contextualizado oscuro, también una custom property para el color de fondo. El siguiente paso es definir en nuestros componentes susceptibles a contextualizar esas custom properties.

CSS

.text-class {
 color: var(--contextual-text, var(--text-color, #121212));
 background-color: var(--contextual-background, white);
 }

Repasando lo que hemos hecho, vemos que hemos asignado a nuestra propiedad “color” el valor de “–contextual-text”, si no está definida entonces será “–text-color” y si tampoco está definida, “#121212”. Al tener nuestro elemento “text-class” dentro de un bloque “contextual-box” o “contextual-box–dark” éste cambiará su aspecto sin que nosotros tengamos que volver a generar herencias ni declarar “!important” ni nada parecido.

En nuestro caso esto es extremadamente útil para definir el aspecto visual de un formulario ya que por diseño tenemos definidos 4 tipos de input dependiendo del fondo (contexto) en el que se encuentran, así definiendo un “form-theme” que tenga esas contextualizaciones, bastará con cambiar todo nuestro aspecto de todos los inputs simplemente añadiendo una clase a nuestro elemento “form” del DOM que cambia los valores de 3 variables, sin necesidad de crear herencias ni especificidades.

Tenemos ante nosotros una herramienta muy potente que nos puede ayudar mucho en nuestros desarrollos, os animo a que si vuestros proyectos lo permiten, empecéis a experimentar con ellas y podréis generar un sistema muy flexible y con todo aún por descubrir 😉

¿Quieres saber que más cosas hacemos en BBVA Next Technologies?

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, brindarle una grata experiencia y mostrar a los usuarios publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando por este sitio web, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información accediendo a nuestra política de cookies aquí.