3 mentiras que te contaram sobre quando usar as unidades em, rem ou px no CSS 🤬

Artigos sobre o tema são abundantes, mas desinformação sobre ele também é, e ela vem sido indiscriminadamente reproduzida. Meias verdades, equívocos e explicações rasas podem significar retrocessos pro desenvolvimento pessoal, mas também pra aplicações em produção.

Sumário

• rem é mais acessível
• rem é melhor que em
• px e outras unidades absolutas são ruins
• Referências

rem é mais acessível 🔗

TL;DR - pra tamanho de fontes é mesmo, já pra outras coisas...

rem ou root font-size é relativa ao tamanho de fonte base da folha de estilos do user-agent que geralmente é 16px porém depende do dispositivo:

Tabela transcrita e traduzida do artigo "People don't change the default 16px font size in their browser (You wish!)" do Nicolas Hoizey.

Vemos por ai diversas postagens que vão se resumir a dizer que rem é uma unidade responsiva - o que não só é mentira, como leva as pessoas a fazerem coisas assim:

@media (max-width: 42rem) {
  /* resto do código */
}

Isso cria uma media query que reage à largura do site relativa ao tamanho da fonte do user-agent. Isso significa que quando a pessoa usuária mudar a configuração de fonte do navegador pra poder enxergar melhor os textos (e elas mudam)

O breakpoint que você esperava que fosse 672px (42 * 16), agora só é ativado quando a tela tiver 840px de largura. Algumas pessoas defendem que esse comportamento é o ideal, trazendo uma grande perca de previsibilidade na declaração dos breakpoints.

Na dúvida:

💡 A tradução foi escrita pelo André Menezes (deMenezes) nesse artigo que recomendo demais se você quiser ler outro take sobre esse mesmo tópico.

Valores absolutos e relativos em CSS: quando usar px, % e rem

deMenezes ・ Jul 12 '22

#valor #absoluto #relativo #css

rem é melhor que em 🔗

TL;DR - em tem seus próprios casos de uso que rem não conseguiria substituir

Sempre desconfiem de afirmações como "x coisa é melhor que y", geralmente elas partem de um ponto de vista limitado ou pessoal e contribuem em nada pra com quem lê.

O em é relativo ao font-size do pai quando utilizado no font-size e relativo ao font-size dele mesmo quando utilizado em outros lugares como height e width. Se utilizado indiscriminadamente pode causar problemas indesejados com elementos aninhados:

<p style="font-size: 10px">
  <!-- font-size === 15px -->
  <span style="font-size: 1.5em">
    Teste 1.5em
    <!-- font-size === 30px -->
    <span style="font-size: 2em">
      Teste 1.5em
    </span>
  </span>
</p>

📖 Esse artigo (apesar de eu não concordar com a conclusão que ele chega) explica de uma forma bem simples porquê o em existe, que problemas ele resolvia e o que motivou a criação do rem- R.I.P. REM, Viva CSS Reference Pixel! por Gion Kunz, em inglês

Porém o modelo mental que mais favorece o uso do em é usá-lo quando você precisa que algo cresça junto com o tamanho da fonte. No caso de uso abaixo, quando você aumenta o font-size do botão, o padding aumenta proporcionalmente, permitindo que o botão permaneça com o mesmo aspecto independente do tamanho. O mesmo funciona com ícones, gaps e coisas similares.

px e outras unidades absolutas são ruins 🔗

TL;DR - skill issue

Ou "evite usar pixeis" - mas evite onde exatamente? Com pouco direcionamento do que fazer, acabamos por chutar unidades CSS sem testar ela em diferentes casos de uso, fazendo nosso layout quebrar de maneiras inimagináveis.

px são incríveis pra definir limites, pois na maioria das vezes não faz sentido o limite de algo ser relativo. Com breakpoints, max-width, min-height e outros similares.

Outro uso é definir o tamanho de coisas que não vão mudar com o contexto, como o caso de alguns border-radius ou box-shadow. Se não faz sentido aquela propriedade ser relativa a algo, não a faça relativa.

Se vai ter algo como regra, tenha não chutar. Cada coisa tem seu caso de uso, fazer de forma consciente significa também testar de forma consciente e garantir a qualidade da aplicação.

Acessibilidade é importante e nenhuma DX vale abrir mão dela. Se seu produto só pode ser usado por algumas pessoas, ou ele não está pronto, ou é só um produto ruim.

Referências 🔗

People don't change the default 16px font size in their browser (You wish!) por Nicolas Hoizey (em inglês)
Esse artigo busca sanar aquele pensamento de que não tem problema se declarar fontes com px pois a pessoa usuária média não redimensiona a fonte.

Responsive Type and Zoom por Adrian Roseli (em inglês)
Esse artigo explica como o uso de técnicas de tipografia responsiva pode ser ruim pra acessibilidade.

Addressing Accessibility Concerns With Using Fluid Type por Maxwell Barvian (em inglês)
Já esse artigo aborda a matemática por detrás da tipografia fluida e te ensina a acertar em uma que seja acessível.

PX, EM or REM Media Queries? por Zell Liew (em inglês)
Defende a opinião de que em e rem são boas unidades em media queries e que o "delay" que mexer no root font-size causa é uma feature e não um bug.

The Surprising Truth About Pixels and Accessibility por Josh Comeau (em inglês)
Esse artigo trás uma visão mais lúcida sobre as qualidades do pixel e quando e onde usá-lo.

JSBin de teste de REM
Possibilita visualizar como um container em px e outro em rem se comportam quando o usuário muda o font-size.

WCAG - Technique C14
Técnica suficiente em relação ao critério de sucesso 1.4.4 - Resize text.

R.I.P. REM, Viva CSS Reference Pixel! por Gion Kunz (em inglês)
Explica sobre reference pixel, a história do em e do rem e trás uma visão interessante (que eu não concordo) do uso do pixel.

Valores absolutos e relativos em CSS: quando usar px, % e rem por André Menezes
Uma visão super bacana do uso dessas três propriedades.