Por qué no utilizar unidades absolutas al escribir CSS

Históricamente, las unidades px solían representar un píxel del dispositivo. Actualmente, esto ya no es necesariamente cierto en muchos casos, como por ejemplo, en las pantallas retina de Apple.

En cambio, las unidades rem representan el tamaño raíz de em. Este es el tamaño de la fuente, lo que coincide con :root que si hablamos de HTML es el elemento . El tamaño de fuente por defecto de todos los navegadores es de 16px.

Cuando utilizas píxeles

La mayoría de los ejemplos que puedes encontrar en internet usan por defecto el valor de px, que anteriormente era el estándar. Existen otras unidades como pt o in que también pudieron serlo, pero no manejaban bien los valores pequeños y se tenía que recurrir a fracciones para representarlos.

Por ejemplo, si quieres representar un borde fino, con px puedes utilizar 1px, con pt tendrías que usar 0.75pt para obtener resultados consistentes.

Cuando utilizas rem

El valor por defecto de rem de 16px no es un argumento muy fuerte para su uso. Escribir 0.0625rem es peor que escribir 0.75pt, así que ¿por qué conviene utilizarlo?

La ventaja de rem sobre las otras unidades se puede explicar en dos puntos:

• Se respetan las preferencias del usuario.
• Puedes cambiar el valor px aparente de rem a lo que sea más conveniente.

Así que ahora veamos a detalle estos dos puntos.

1. Las preferencias del usuario

Respetar los deseos del usuario siempre es importante. El hecho de que un navegador esté configurado por defecto en 16px, no significa que un usuario no pueda cambiar sus preferencias a 24px o 32px para corregir la baja visión o la mala visibilidad.

Si basas tus unidades en rem, cualquier usuario con un tamaño de fuente más grande verá un sitio proporcionalmente más grande. Los bordes serán más grandes, el relleno será mayor, los márgenes también y todo se escalará con fluidez.

Además, también puedes asegurarte de que el sitio que ven tus usuarios se ajusta a su pantalla. Un usuario con el tamaño de fuente establecido en 32px en un navegador de 640px de ancho, se estará visualizando efectivamente como se muestra a un usuario en 16px en un navegador de 320px de ancho. Lo anterior, asegura que no haya ninguna pérdida para RWD en el uso de rem.

2. Cambiar el valor de píxeles aparente

Dado que rem se basa en el tamaño de la fuente del nodo :root, si quieres cambiar lo que representa 1rem, todo lo que tienes que hacer es cambiar el tamaño de la fuente.

:root {
	font-size: 50px;
}

body {
	font-size: 1rem; 
}

No establezcas el font-size en HTML a un valor px; al hacer esto eliminas las preferencias del usuario sin poder recuperarlas. Si quieres cambiar el valor aparente de rem, lo mejor es utilizar unidades porcentuales %.

La matemática para esto es razonablemente sencilla. El tamaño aparente de la fuente de :root es de 16px, pero lo quieres cambiar a 20px. Todo lo que tienes que hacer es multiplicar 16 por algún valor para obtener 20.

Con esto se genera la siguiente ecuación:

Y si resuelves para obtener X, tienes el siguiente resultado:

Por lo tanto, la asignación del valor de root debería quedar de la siguiente forma.

:root {
	font-size: 125%;
}

Aunque hacer todos los cálculos con múltiplos de 20 no es tan bueno, pero una sugerencia bastante común es hacer que el tamaño aparente del rem sea igual a 10px. El número mágico para eso es 10/16, que es 0.625, o sea, 62.5%.

:root {
	font-size: 62.5%;
}

El único problema que se tiene ahora es que el tamaño por defecto para el resto de la página es demasiado pequeño, pero la solución es bastante simple. Estableces un tamaño de fuente haciendo uso de rem.

body {
	font-size: 1.6rem;
}

Es importante tener en cuenta que, con este ajuste, el valor aparente de rem es de 10px, lo que significa que cualquier valor que escribas en px se puede convertir directamente a rem saltando un decimal.

padding: 20px->padding: 2rem;

Principales particularidades que debes tener en cuenta en el uso de REM

Aunque me gustaría decirte que rem resuelve todos los problemas, existen algunos detalles, principalmente al utilizar las media queries.

1. Media queries

Dentro de las media queries las unidades rem utilizan el valor inicial del font-size, por lo tanto, su valor aparente es siempre de 16px.

Esto puede ser un poco molesto, porque significa que toca hacer algunos cálculos fraccionarios, pero la ventaja aquí es que los valores más comunes de las media quieres ya utilizan valores que son múltiplos de 16.

Adicionalmente, si utilizas un preprocesador de CSS, puedes emplear los mixins o variables para gestionar tu media quieres, lo que enmascarará el problema por completo.

2. Safari

Lamentablemente, existe un error conocido en Safari por el que los cambios en el tamaño de fuente de :root cambian realmente los valores rem calculados para los rangos de consulta de medios.

Esto puede causar un comportamiento muy extraño de la fuente del elemento :root se cambia dentro de las media quieres. Por suerte la solución es sencilla: utiliza em en lugar de rem para las media quieres.

3. Cambios frecuentes de contexto

Si cambias continuamente entre diferentes proyectos, es posible que el tamaño aparente de la fuente de rem tenga valores diferentes. En un proyecto, podrías estar usando un tamaño de 10px mientras que en otro proyecto el tamaño podría ser de 1px. Esto puede ser confuso y causar problemas.

Mi única recomendación aquí es seguir con 62.5% para convertir rem a un tamaño aparente de 10px, porque es lo más usual basado en mi experiencia.

4. Librerías compartidas de CSS

Si estás escribiendo CSS que va a ser utilizado en un sitio que no controlas, como por ejemplo para un widget incrustado, realmente no hay una buena manera de saber qué tamaño aparente tendrá rem. Si ese es el caso, no dudes en seguir usando px.

Sin embargo, si todavía quieres utilizar rem, considera la posibilidad de publicar una versión Sass o LESS de la hoja de estilo con una variable para anular el escalado del tamaño aparente de rem.

Es momento de practicar

Ahora que sabes todo esto es momento de ponerlo en práctica. Te reto a que busques un proyecto que hayas hecho anteriormente y hagas los ajustes necesarios para reemplazar los px que hayas usado por rem. Incluso puedes empezar un proyecto nuevo utilizando lo aprendido en este blog.

Si quieres profundizar más sobre el uso de rem y px te recomiendo el curso Definitivo de HTML y CSS dado por el profesor Diego De Granda en donde no solo aprenderás sobre este tema, sino que también aprenderás todo lo que necesitas para empezar en el desarrollo web online y construir sitios de manera eficiente.

Compárteme en los comentarios si conoces alguna otra ventaja al utilizar rem en tus proyectos y recuerda nunca parar de aprender 💚!