Stripes con CSS Custom Properties
Las stripes son esas franjitas tan bonitas que podemos ver en muchos sitios en la calle, a menudo en carteles pero también en lugares cotidianos.
El cómo hacer esto con CSS no es complicado, vamos a hacer uso de los gradientes, pero lo que veo realmente útil es la simplificación y reutilización de estos con las variables nativas de CSS, más conocidas como CSS Custom Properties.
Empecemos
Para crear un box con stripes dentro, es tan simple como generar un div con ancho y alto (le damos ancho y alto ya que no tiene contenido, si lo tuviera no sería necesario):
Luego, para crear los stripes es tan simple como generar un linear-gradient que se repita:
No me voy a explayar demasiado en qué valores se pueden asignar a un repeating-linear-gradient pero en este caso primero indicamos la inclinación que queremos que tenga nuestro gradiente, luego le decimos el color principal (o color inicial en todo caso) y los puntos de corte que queremos.
En nuestro ejemplo:
- que empiece con el color negro a los 0px y siga con el mismo color hasta los 15px
- a partir de esos 15px y hasta los 30px le asignamos el color amarillo
- …esto se repite todo el tiempo completando los stripes.
Y esto es todo para montar nuestros stripes. Ahora bien. Y si queremos tener unos stripes que sean más finos por ejemplo? o queremos que tengan otros colores? Aplicando la metodología BEM podríamos tener algo así:
Pero hacer esto implica repetir en cada modificador las mismas propiedades pero con distintos valores. Ahí es donde entran en juego las CSS Custom Properties.
Refactorización con CSS Custom Properties
Lo primero que haremos será definir las variables que utilizaremos y que luego serán modificadas según cada caso.
Con esto ya tenemos nuestras variables listas para usar. En la definición de las variables estamos poniendo como valores, los valores que serán por defecto. Lo siguiente que haremos será usar esas variables en nuestro primer stripe.
Obteniendo el mismo resultado que antes:
Y a partir de aquí todo es mucho más simple.
Ahora crearemos nuestros modificadores, pero lo único que tendremos que escribir serán los nuevos valores de estas variables.
Así, en el caso de nuestro stripe con franjas finas:
Y en nuestro stripe rojo y blanco:
Y listo! Nuestro código final será
Les dejo también el ejercicio completo en Codepen
Conclusión
Al final, lo bueno de las CSS Custom Properties es que sólo definimos las variables que vamos a reutilizar y luego tenemos que simplemente llamarlas y modificarlas, sin necesidad de reescribir una y otra vez todas las propiedades que las usan.
Gracias por tomarte el tiempo en leer, cualquier feedback será bienvenido :)
Nos vemos por ahí.
