Unidades CSS — Um Guia Completo
Tags: css, frontend, html
Published: 2024-03-11 15:06:41

Vejo com muita frequência o pessoal não saber quais unidades CSS usar e em quais situações. Esse é um assunto quase abstrato pois não é claro cada caso meticulosamente explicado de quando usar cada unidade.

Sou frontend a um tempo e ao longo dos anos construí um padrão que funciona pra mim e que aplico em todo projeto que trabalho hoje. Vale reforçar que essa é a minha visão sobre o assunto, mas não é a única, existem vários meios de fazer um bom site.
Aqui vou falar de _quase_ todas as unidades, seus usos e peculiaridades.

## Unidades abordadas
Vou usar o [w3schools](https://www.w3schools.com/cssref/css_units.php) como referencia para as unidades, mas antes vamos separar as unidades em 2 categorias:
**absolutas** com cm, mm, in, px, pt e pc;
**relativas** com em, rem, ex, ch e %;

## Absolutas
Unidades absolutas são independentes de qualquer outra coisa, além da definição da própria unidade. Valendo apenas lembrar que algumas unidades aqui podem variar dependendo da precisão do seu _hardware_.

**Características**

**Prós:**
- Criar elementos puramente visuais
- Criar experiencias personalizadas para mídias especificas

**Contras:**
- CSS não é escalável
- Responsividade mais verbosa
- Páginas não são dinâmicas, mas sim adaptativas

### px
Com certeza a unidade mais utilizada na web, não que seja a melhor opção, mas é com certeza a mais fácil de se aplicar em telas no geral.

**px** é uma unidade _péssima_ pra trabalhar com responsividade de **containers**, exigindo usar muito mais _media-queries_ do que de fato seria necessário se usasse uma unidade mais adequada.

_Até pode_ usar `px` se responsividade de _containers_ não for algo necessário na sua aplicação, porém é muito raro criar algo específico por dispositivo, logo é bem pouco comum esse ser o caso.

**Use `px` quando trabalhar com**

- Detalhes visuais como `border-radius`, `border`, `box-shadow` e etc
- Tamanhos (`width`/`height`) de _elementos puramente visuais não-relativos_. Esse tipo de elemento segue o mesmo princípio dos _detalhes visuais_, eles dependem apenas de si mesmos e não variam em tamanho de acordo com nada, mudam pouco entre resoluções e são muito usados quando trabalhamos com layouts que possuem detalhes nas páginas apenas para finalidade de preenchimento, veja a baixo

![screenshot de um site com alguns elementos puramente visuais em destaque](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrtufeemuqqbvk06hdav.png)

![screenshot de uma outra sessão do mesmo site destacando outros tipos de elementos puramente visuais](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38iflu21rl0ghcaoi78h.png)


**Não use `px` quando trabalhar com**
- _media-query_ , é basicamente a pior unidade pra se usar, [traduzi esse artigo sobre esse assunto](https://www.linkedin.com/pulse/px-em-ou-rem-media-queries-alexandre-gomes/)
- _Containers responsivos_ pois usar pixels nesses containeres acaba exigindo muito mais media-querydo que de fato você iria precisar. Isso também deixa mais difícil de dar manutenção pois as coisas não fluem, são todas estáticas, exigindo mudanças manuais em cada nível dos elementos. Usar px nesse caso também torna seu site _adaptativo_ e não _responsivo_ o que não é um grande problema, mas pela minha vivencia acabo não concordando com a abordagem.
- Qualquer propriedade que afete **fonte** como `font-size`, `letter-spacing`, `line-height` e etc por razões de acessibilidade e respeito com o usuário. Quando você usa fontes em `px` você acaba ignorando completamente as preferencias de tamanho de fonte do usuário e força ele a ver as coisas da forma que você fixou, isso é **péssimo** pois penaliza pessoas com problemas ou até mesmo deficiências visuais. Para fontes prefiro `rem`, mas vamos discutir ela melhor na sessão de unidades relativas.
- Espaçamentos como `padding` e `margin` pois esses espaçamentos vão variar de acordo com outros elementos relativos na sua página, `px` nesse caso seria um elemento fixo num mar de relatividade o que acabaria variando muito a experiencia do site com variações principalmente de _fonte_, por isso não devemos usar `px` nesse caso, a unidade correta vamos abordar na sessão de unidades relativas.

### cm, mm, in

Essas unidades não são _tão usadas_ por serem muito mais úteis em impressão do que na tela de fato, mas é importante falarmos sobre elas.

Como já dito acima são unidades que **não devem ser usadas para web**, mas sim para gerar documentos impressos, quando for imprimir a tela em questão ou quando na impressão formos usar elementos estáticos na tela.

Antigamente essas unidades eram mais usadas, na época inicial do CSS, para criar documentos impressos, nessa época era MUITO mais frequente.

> **Nota:** A pesar de que faz sim sentido usar essas unidades para impressão e eu ainda vejo valor nelas, hoje em dia não é algo tão usual assim e você poderia usar `px` normalmente.

**Use `cm`, `mm` e `in` quando trabalhar com**
- _Elementos puramente visuais_ em impressão de papel por serem unidades físicas que vão ser traduzidas para coisas igualmente físicas.

**Não use `cm`, `mm` e `in` quando trabalhar com**
- Telas digitais, munitores ou qualquer coisa que for ser vista no âmbito digital.
- _Fontes_ de impressão em papel, a pesar de que sim, essas são unidades boas para impressão física, existem unidades melhores pra esse fim que vamos discutir no próximo tópico.
- _qualquer outro caso que não sejam os citados no tópico “use”_

### pt e pc
Quando falamos de unidades em impressões de texto precisamos falar, basicamente, a língua da impressora e essa língua é `pt` e `pc`.

Essas unidades nasceram pra trabalhar texto impresso especificamente, ou seja, elas devem ser usadas apenas para esse tipo de trabalho.

**Use `pt` e `pc` quando trabalhar com**
- Fontes em impressão em papel pois essas unidades nasceram exatamente para isso e as impressoras em geral não tem problemas de precisão para trabalhar com essas unidades.

**Não use `pt` e `pc` quando trabalhar com quaisquer outra coisa que não seja impressão no papel.**

## Relativas
Unidades relativas são aquelas que os desenvolvedores front-end mais vão usar, são unidades dependentes de outros valores como tamanho da tela, configurações do usuário e etc.

**Características**

**Prós:**
- Responsividade mais manutenível
- Se adapta de acordo com a necessidade de usuário
- Maior escalabilidade para componentes

**Contras:**
- Exige devs mais experientes

### em e rem
As unidades clássicas pra se trabalhar com fontes na web, diferente do `pt` e `pc`, `em` e `rem` são unidades feitas pra usar fora de impressão e é a unidade que vamos usar majoritariamente para fontes em nossas aplicações e sites.

A pesar disso existem peculiaridades dentro de cada unidade que me força a tratar cada uma em um tópico diferente!

#### em
Essa unidade deriva seu valor da _font size_ do _elemento pai_, ou seja, _se o pai possui 16px de font-size, 1rem vai ser 16px, 2rem vão ser 32px_ e assim sucessivamente.

Essa unidade é bastante útil quando não trabalhamos com layouts criados por designers decorrente de que em geral eles não pensam nessa propagação do `font-size` com `em`, tornando mais trabalhoso do que útil usar `em` como unidade nesses casos, para usar fontes na web `rem` acaba sendo melhor na minha opinião, mas vamos discutir melhor sobre isso no próximo tópico.

Além disso existe uma coisa muito importante sobre o uso de `em`, essa é com certeza a melhor unidade pra se usar com _responsividade_, fazendo com que troquemos o `@media screen and (max-width: 1200px)` por `@media screen and (max-width: 120em)` _(considerando uma font-size base de 10px)_.

Existem os que defendam que é melhor utilizar os espaçamentos (como `padding` e `margin`) com `em`, mas eu discordo porque isso gera mais problemas do que soluções. Posso até, quando precisar alterar o tamanho de uma fonte, ter que me atentar a reajustar o espaçamento também uma vez que o espaçamento vai mudar com a fonte e isso quase nunca é o desejado.

**Use `em` quando trabalhar com**
- `media-query`, traduzi um artigo excelente sobre o assunto e você pode [ler ele aqui](https://www.linkedin.com/pulse/px-em-ou-rem-media-queries-alexandre-gomes/)
- Quando for trabalhar com _fontes_ em aplicações web que não tenham sido idealizadas por designers. Na maioria dos casos os designers não fazem os layouts de uma forma que as fontes são relativas umas as outas de forma pensada, fazendo com que qualquer alteração simples de `font-size` em vire uma necessidade de alteração em cascata ao invés de ser uma simples alteração como deveria ser. Essa unidade é melhor quando não temos um layout pronto ou temos apenas um _wireframe_ base, nesses casos faz sentido.

**Não use em quando trabalhar com quaisquer outra situação que não sejam os casos citados a cima.**

#### rem
Talvez a unidade mais negligenciada na minha visão, o `rem` tem o mesmo poder do `em`, mas não deriva da fonte pai e sim da fonte base da página, isso faz com que ela seja muito mais consistente pra se trabalhar com fontes na web!

Essa unidade é excelente para fontes por ser uma unidade acessível e não exigir quase nenhum esforço dos devs para fazer sua acessibilidade funcionar, o `rem` deriva da _fonte root_ e faz com que, se ela for `16px`, logo `1rem` vai ser `16px` e assim sucessivamente tal como o `em` e é dai que vem sua acessibilidade!

Existem pessoas com dificuldades visuais ou mesmo apenas pessoas com grau mais alto no óculos cujas, em geral, aumentam a fonte do celular ou dão zoom na página pra que seja mais fácil de enxergar.

Esses aumentos na web são traduzidos como o _font root_ que por sua vez vão afetar diretamente tudo que tiver usando `rem`, fazendo no fim a fonte realmente aumentar e se adaptar a necessidade do usuário sem que ele precise dar zoom na tela apenas porque sua aplicação não suporta a necessidade dele.

Assim, para tudo que for derivado de fontes como `font-size`, `letter-spacing` e qualquer outro valor que em geral usaríamos `px`, use `rem`.

Mas não só isso, também é interessante usar `rem` para delimitadores. Um layout nem sempre deve esticar até o infinito e esse valor de limite, que pode ser na prática `1920px`, pode ser traduzido em `192rem` por exemplo.

> **Nota:** Vale do adendo de que `line-height` acaba sendo melhor sem nenhuma unidade.

`rem` também é bastante útil pra criar espaçamentos de `padding` e `margin` pela sua consistência e fluidez com a _fonte root_, sendo essa na minha visão a melhor unidade pra isso também.

> **Nota:** Prefiro usar `rem` alterando a fonte do `html` e do `body` para `font-size: 62.5%;` fazendo essa alteração fica mais fácil de trabalhar com `rem` já que ela é múltipla de `10`, e não de `16`. Os exemplos dados inclusive foram baseados nesse hack.

**Use `rem` quando trabalhar com**
- Para todas as propriedades derivadas de fonte na web pela sua consistência de manter o valor da unidade e acessibilidade escalando o valor de acordo com a necessidade do usuário.
- Espaçamentos gerais como `padding` e `margin` pois eles vão mudar de acordo com a fonte root da página, se adaptando de acordo com a alteração de fonte base o que deixa a página mais consistente em sua fluidez e evita que ela quebre quando usarmos fontes baseadas em `rem`.
- Delimitadores de tamanho de página já que como os espaçamentos e as fontes estão sendo derivadas da _root font_ do usuário é interessante que os delimitadores sejam usados com `rem` também. Assim o tamanho máximo da página irá fluir de acordo com a _root font_, permitindo mais espaço para acomodar os demais elementos que cresceram junto com a alteração da _root font_ do site.

**Não use `rem` quando trabalhar com quaisquer outras situações que não sejam as citadas a cima.**

**Disclaimer**

Usamos o `rem` para espaçamentos de não `em` pela natureza derivada do root do `rem`. O problema do `em` é que ele varia de acordo com a fonte do pai e isso gera _side-effects_ geralmente indesejados. Em contra partida o `rem` deriva do _root_, o que não atrapalha enquanto trabalhamos, mas altera de acordo com a necessidade do usuário. Então usando `rem` para espaçamentos ganhamos a fluidez dos espaçamentos variarem com a fonte.

### ex e ch
Essas unidades são meio novas e são relativas a caracteres na `font-size` atual, boas pra fazer coisas derivadas dos tamanhos dos textos.

**ex:** é a altura do caractere `x` na `font-size` atual
**ch:** é a largura do caractere `0` na `font-size` atual

**Use `ex` quando trabalhar com**
- Contêineres com altura relativa a quantidade de linhas, por exemplo quando você quer limitar uma quantidade de linhas visíveis no container sem precisar fazer algum hack

**Não use `ex` quando trabalhar com qualquer outra situação que não seja ao menos semelhante a citada a cima.**

**Use `ch` quando trabalhar com**
- Contêineres com largura relativa a quantidade de caracteres, por exemplo quando você quer limitar o tamanho de um texto no container sem precisar fazer algum hack

**Não use `ch` quando trabalhar com qualquer outra situação que não seja ao menos semelhante a citada a cima.**

_Para ambos os casos pode ter alguma situação além dessas que o uso faz sentido e eu desconheça, mas via de regra é isso._

### %
Essa é a unidade que deveria ser a mais utilizada na esmagadora maioria dos casos, mas infelizmente não é tão utilizada assim…

Essa unidade nos permite evitar um uso excessivo de _media-query_ pela sua característica dinâmica com relação ao tamanho da página. Com isso você pode deixar seus contêineres fluidos e dinâmicos de acordo com a necessidade.

Existem também outros casos que podemos usar `%` a pesar de que sua principal função é determinar tamanhos de contêineres.

**Use `%` quando trabalhar com**
- Contêineres que fluem com o tamanho da página/container pai, quase todos os elementos de uma página devem ser construídos com `%` por ser uma unidade flexível. Essa unidade reduz consideravelmente a quantidade de _media-query_ que sua página precisa sendo mais fácil de dar manutenção e manter no geral.
 - **Adendo:** Porcentagem deve ser usada em todos os contêineres, pai/filho não importa. Existe exceções já abordadas neste artigo, mas fora elas, via de regra, o resto TUDO é porcentagem.
- Posicionamento relativo pois quando você tem algo em algum posicionamento _left_/_right_/_bottom_/_top_ que varia de acordo com o tamanho do container é interessante usar, por exemplo, um `` `right: 3%`.
- _Border Radius_ para atingir resultados ovalados quanto trabalhar com `border-radius`.

**Não use `%` quando trabalhar com**
- Fontes/Textos pois quase nunca você vai querer usar `font-size` relativa ao container pai, em geral a fonte varia em outra proporção oque faria fontes em porcentagem gerarem mais manutenção do que soluções.

## Conclusão
Eu espero que não tenha esquecido nenhum caso de uso ou não-uso de algum unidade, aqui tentei compilar todas as regras que uso no meu processo de desenvolvimento e que veem funcionando pra mim a bastante tempo. Vale lembrar que esse **não é o único jeito de usar as unidades**, é apenas, o meu jeito de usar elas.

PS: Eu sei que ficou faltando falar de `vh`, `vw`, `vmin`, `vmax` e etc, mas essas unidades vou deixar para uma parte dois desse artigo pra manter esse aqui mais conciso no objetivo. Na minha visão também não tem tanto que essas unidades façam que as apresentadas aqui não, logo essas unidades seriam mais um adendo no conteúdo do que realmente algo diferente a ser trazido.