Diseños responsivos y propiedades personalizadas de CSS: definición de variables y puntos de interrupción

Las propiedades personalizadas de CSS (también conocidas como variables CSS ) se están volviendo cada vez más populares. Finalmente alcanzaron un soporte de navegador decente y poco a poco se están abriendo camino en varios entornos de producción. La popularidad de las propiedades personalizadas no debería ser una sorpresa, porque pueden ser realmente útiles en numerosos casos de uso, incluida la gestión de paletas de colores, la personalización de componentes y la temática . Pero las variables CSS también pueden resultar muy útiles cuando se trata de diseño responsivo.

Serie de artículos:

1. Definición de variables y puntos de interrupción (esta publicación)
2. Construyendo un sistema de red flexible

Consideremos un articleelemento con un título y un párrafo dentro:

articleh2Post's heading/h2pLorem ipsum dolor sit amet, consectetur adipisicing elit.Laudantium numquam adipisci recusandae officiis dolore tenetur,nisi, beatae praesentium, soluta ullam suscipit quas?/p/article

En tal caso, es un escenario común cambiar algunos tamaños y dimensiones dependiendo del ancho de la ventana gráfica. Una forma de lograr esto es mediante consultas de medios:

.post {padding: 0.5rem 1rem;margin: 0.5rem auto 1rem;}.heading {font-size: 2rem;}@media (min-width: 576px) {.post {padding: 1rem 2rem;margin: 1rem auto 2rem;}.heading {font-size: 3rem;}} 

Este enfoque nos brinda una manera sencilla de controlar las propiedades de CSS en diferentes tamaños de pantalla. Sin embargo, puede resultar difícil de mantener a medida que crece la complejidad de un proyecto. Cuando se utilizan consultas de medios, mantener el código legible y SECO al mismo tiempo suele resultar un desafío.

Los desafíos más comunes al escalar este patrón incluyen:

• Selectores repetidos: además de inflar el código con múltiples declaraciones, también dificulta la refactorización futura, por ejemplo, cada vez que cambia el nombre de una clase es necesario recordar actualizarlo en varios lugares.
• Propiedades repetidas: tenga en cuenta que al sobrescribir reglas CSS dentro de consultas de medios, es necesario repetir la declaración completa (por ejemplo font-size: 3rem;), aunque 3remen realidad solo cambia el valor ().
• Consultas de medios repetidas: para mantener los estilos responsivos contextuales, es una práctica común incluir las mismas consultas de medios en varios lugares, cerca de los estilos que anulan. Desafortunadamente, no sólo hace que el código sea más pesado, sino que también puede hacer que los puntos de interrupción sean mucho más difíciles de mantener. Por otro lado, mantener todos los estilos responsivos en un solo lugar, lejos de sus declaraciones originales, puede resultar muy confuso: terminamos con múltiples referencias a los mismos elementos ubicados en lugares completamente diferentes.

Podemos argumentar que las declaraciones y consultas repetidas no deberían ser tan importantes con la compresión de archivos adecuada habilitada, al menos mientras nos referimos al rendimiento. También podemos fusionar múltiples consultas y optimizar su código con herramientas de posprocesamiento. ¿Pero no sería más fácil evitar estos problemas por completo?

Hay muchas maneras de evitar los problemas enumerados anteriormente. Uno de ellos, que exploraremos en este artículo, es utilizar propiedades personalizadas de CSS.

Uso de variables CSS para valores de propiedad

Hay muchos artículos sorprendentes en la web que explican el concepto de propiedades personalizadas de CSS. Si aún no ha tenido la oportunidad de familiarizarse con ellos, le recomendaría comenzar con uno de los artículos para principiantes sobre este tema, como este fantástico artículo de Serg Hospodarets, ya que no vamos a entrar en detalles sobre el uso básico de este tema. artículo.

La forma más común de utilizar propiedades personalizadas de CSS en un diseño adaptable es usar variables para almacenar valores que cambian dentro de consultas de medios. Para lograr esto, declara una variable que contenga un valor que se supone que debe cambiar y luego reasignalo dentro de una consulta de medios:

:root {  --responsive-padding: 1rem;}@media (min-width: 576px) {                               :root {    --responsive-padding: 2rem;  }}.foo {padding: var(--responsive-padding);}

Asignar variables al :rootselector no siempre es una buena idea. Al igual que en JavaScript, tener muchas variables globales se considera una mala práctica. En la vida real, intente declarar las propiedades personalizadas en el ámbito en el que realmente se utilizarán.

De esta forma, evitamos múltiples reglas de la .fooclase. También estamos separando la lógica (valores cambiantes) de los diseños reales (declaraciones CSS). Adaptar este enfoque en nuestro ejemplo anterior nos da el siguiente CSS:

.post {--post-vertical-padding: 0.5rem;--post-horizontal-padding: 1rem;--post-top-margin: 0.5rem;--post-bottom-margin: 1rem;--heading-font-size: 2rem;}@media (min-width: 576px) {.post {--post-vertical-padding: 1rem;--post-horizontal-padding: 2rem;--post-top-margin: 1rem;--post-bottom-margin: 2rem;--heading-font-size: 3rem;}}.post {padding: var(--post-vertical-padding) var(--post-horizontal-padding);margin: var(--post-top-margin) auto  var(--post-bottom-margin);}.heading {font-size: var(--heading-font-size);}

Observe que el uso de variables en propiedades abreviadas (por ejemplo padding, margino font) tiene algunas repercusiones muy interesantes. Como las propiedades personalizadas pueden contener casi cualquier valor (más sobre esto más adelante), incluso una cadena vacía, no está claro cómo se separará el valor de una propiedad abreviada en propiedades escritas a mano que se usarán en la cascada más adelante. Por ejemplo, lo autoutilizado en la marginpropiedad anterior puede resultar ser un margen superior e inferior, un margen izquierdo y derecho, un margen superior, un margen derecho, un margen inferior o un margen izquierdo; todo depende de los valores de las propiedades personalizadas.

Es cuestionable si el código parece más limpio que el del ejemplo anterior, pero a mayor escala, definitivamente es más fácil de mantener. Intentemos simplificar un poco este código ahora.

Observe que algunos valores se repiten aquí. ¿Qué pasa si intentamos fusionar variables duplicadas? Consideremos la siguiente alteración:

:root {--small-spacing: 0.5rem;--large-spacing: 1rem;--large-font-size: 2rem;}@media (min-width: 576px) {:root {--small-spacing: 1rem;--large-spacing: 2rem;--large-font-size: 3rem;}}.post {padding: var(--small-spacing) var(--large-spacing);margin: var(--small-spacing) auto  var(--large-spacing);}.heading {font-size: var(--large-font-size);}

Parece más limpio pero ¿es realmente mejor? No necesariamente. En aras de la flexibilidad y la legibilidad, es posible que esta no sea la solución adecuada en todos los casos. Definitivamente no deberíamos fusionar algunas variables solo porque accidentalmente resultaron tener los mismos valores. A veces, siempre que hagamos esto como parte de un sistema bien pensado, puede ayudarnos a simplificar las cosas y preservar la coherencia en todo el proyecto. Sin embargo, en otros casos, esta manera puede resultar rápidamente confusa y problemática. Ahora, echemos un vistazo a otra forma en que podemos abordar este código.

Usar variables CSS como multiplicadores

Las propiedades personalizadas de CSS son una característica bastante nueva en la web moderna. Una de las otras características increíbles que se implementaron en los últimos años es la calc()función. Nos permite realizar operaciones matemáticas reales en CSS en vivo. En términos de compatibilidad con el navegador, es compatible con todos los navegadores que admiten propiedades personalizadas de CSS.

calc()tiende a funcionar muy bien con las variables CSS, haciéndolas aún más poderosas. ¡Esto significa que podemos usar calc()propiedades personalizadas internas y propiedades personalizadas internas calc()!

Por ejemplo, el siguiente CSS es perfectamente válido:

:root {--size: 2;}.foo {--padding: calc(var(--size) * 1rem); /* 2 × 1rem = 2rem */padding: calc(var(--padding) * 2);   /* 2rem × 2 = 4rem */}

¿Por qué esto nos importa a nosotros y a nuestros diseños responsivos? Significa que podemos usar una calc()función para alterar las propiedades personalizadas de CSS dentro de las consultas de medios. Digamos que tenemos un relleno que debería tener un valor de 5pxen dispositivos móviles y 10pxde escritorio. En lugar de declarar esta propiedad dos veces, podemos asignarle una variable y multiplicarla por dos en pantallas más grandes:

:root {--padding: 1rem;--foo-padding: var(--padding);}@media (min-width: 576px) {                             :root {--foo-padding: calc(var(--padding) * 2);}}.foo {padding: var(--foo-padding);}

Se ve bien, sin embargo, todos los valores ( --padding, calc(--padding * 2)) están lejos de su declaración ( padding). La sintaxis también puede resultar bastante confusa con dos variables de relleno diferentes ( --paddingy --foo-padding) y una relación poco clara entre ellas.

Para que las cosas queden un poco más claras, intentemos codificarlo al revés:

:root {--multiplier: 1;}@media (min-width: 576px) {                             :root {--multiplier: 2;}}.foo {padding: calc(1rem * var(--multiplier));}

De esta manera, logramos el mismo resultado calculado con un código mucho más limpio. Entonces, en lugar de usar una variable para un valor inicial de la propiedad ( 1rem), se usó una variable para almacenar un multiplicador ( 1en pantallas pequeñas y 2en pantallas más grandes). También nos permite utilizar la --multipliervariable en otras declaraciones. Apliquemos esta técnica a los rellenos y márgenes en nuestro fragmento anterior:

:root {--multiplier: 1;}@media (min-width: 576px) {:root {--multiplier: 2;}}.post {padding: calc(.5rem * var(--multiplier))calc(1rem  * var(--multiplier));margin:  calc(.5rem * var(--multiplier))autocalc(1rem  * var(--multiplier));}

Ahora, intentemos implementar el mismo enfoque con la tipografía. Primero, agregaremos otro encabezado a nuestros diseños:

h1My Blog/h1articleh2Post's heading/h2pLorem ipsum dolor sit amet, consectetur adipisicing elit.Laudantium numquam adipisci recusandae officiis dolore tenetur,nisi, beatae praesentium, soluta ullam suscipit quas?/p/article 

Con múltiples estilos de texto implementados, podemos usar una variable para controlar también sus tamaños:

:root {--headings-multiplier: 1;}@media (min-width: 576px) {:root {--headings-multiplier: 3 / 2;}}.heading-medium {font-size: calc(2rem * var(--headings-multiplier))}.heading-large {font-size: calc(3rem * var(--headings-multiplier))}

You may have noticed that 3 / 2 is not a valid CSS value at all. Why does it not cause an error then? The reason is that the syntax for CSS variables is extremely forgiving, which means almost anything can be assigned to a variable, even if it’s not a valid CSS value for any existing CSS property. Declared CSS custom properties are left almost entirely un-evaluated until they are computed by a user agent in certain declarations. So, once a variable is used in a value of some property, this value will turn valid or invalid at the computed-value time.

Oh, and another note about that last note: in case you’re wondering, I used a value of 3 / 2 simply to make a point. In real life, it would make more sense to write 1.5 instead to make the code more readable.

Now, let’s take a look at the finished live example combining everything that we discussed above:

Again, I would never advocate for combining calc() with custom properties to make the code more concise as a general rule. But I can definitely imagine scenarios in which it helps to keep code more organized and maintainable. This approach also allows the weight of CSS to be significantly reduced, when it’s used wisely.

In terms of readability, we can consider it more readable once the underlying rule is understood. It helps to explain the logic and relations between values. On the other hand, some may see it as less readable, because it’s tough to instantly read what a property holds as a value without first doing the math. Also, using too many variables and calc() functions at once may unnecessarily obscure code and make it harder to understand, especially for juniors and front-end developers who are not focused on CSS.

Conclusion

Summing up, there’s a lot of ways to use CSS custom properties in responsive design, definitely not limited to the examples shown above. CSS variables can be used simply to separate the values from the designs. They can also be taken a step further and be combined with some math. None of the presented approaches is better nor worse than the others. The sensibility of using them depends on the case and context.

Now that you know how CSS custom properties can be used in responsive design, I hope you will find a way to introduce them in your own workflow. Next up, we’re going to look at approaches for using them in reusable components and modules, so let’s check that out.