Al comenzar con CSS, te enseñan que hay unidades relativas como em y rem. Suenan parecidas, hacen cosas similares… pero luego llega un bug raro, un tamaño inesperado o una cascada mal calculada. ¿Qué pasó?
Bienvenido a la batalla silenciosa de las unidades en CSS. Aquí te explicamos quién gana y por qué.
EM y REM: ¿Qué los hace diferentes?
EM: adaptable pero impredecible
EM significa elemento modular. Su valor depende del elemento actual, es decir, del padre directo.
Ejemplo práctico:
<!-- Bloque de código eliminado por incompatibilidad -->En estructuras anidadas, el valor se multiplica, lo que puede causar un efecto bola de nieve.
REM: estable y escalable
REM es root em y siempre se basa en el font-size del elemento raíz (html).
Ejemplo práctico:
<!-- Bloque de código eliminado por incompatibilidad -->Esto da consistencia. Sabes exactamente qué tamaño estás usando, sin importar dónde esté el elemento.
Entonces, ¿cuándo usar EM y cuándo REM?
Usa REM para:
- Tipografías globales (body, h1, p, etc.)
- Margen, padding y layout general
- Escalabilidad predecible en todo el sitio
Usa EM para:
- Componentes internos que deben escalar con su padre
- Casos donde la relación interna entre elementos importa
- Botones, íconos, elementos UI
¿Y qué hay del px?
Usar px para fuentes o estructuras rompe la accesibilidad. Las personas no pueden escalar el texto desde el navegador. Además, los diseños no se adaptan bien a dispositivos móviles.
¿La técnica del 62.5% en CSS sigue siendo útil?
¿Qué es?
<!-- Bloque de código eliminado por incompatibilidad -->Esto hace que 1rem = 10px (si 16px era el valor base). La intención es facilitar los cálculos mentales.
¿Por qué ya no se recomienda?
- Interfiere con el tamaño de fuente configurado por el usuario.
- Afecta la accesibilidad.
- Hoy existen mejores prácticas con rem y % sin modificar el html.
REM gana la batalla, pero EM sigue en el juego
No se trata de elegir uno y olvidar el otro. Se trata de entender su comportamiento y aplicarlos inteligentemente. Piensa en rem como tu regla base, y en em como una forma flexible de ajustar elementos internos.
Cuando sabes cómo funcionan, CSS deja de ser un dolor de cabeza y se convierte en una herramienta poderosa de diseño adaptativo.