# CSS Shorthands: Dica de Ouro

> Cuidado com CSS shorthands! Descubra o perigo oculto das propriedades abreviadas e como usá-las corretamente sem prejudicar código. Dica de ouro!

URL: https://dpw.dev/css/css-shorthands-dica-de-ouro/  
Publicado em: 2022-03-21  
Categoria: css  
Tags: basico-da-web, boas-praticas  
Autor: Tárcio Zemel

É bastante comum usarmos **CSS shorthands** ao escrever estilos para a Web. Mas você sabia que elas podem guardar um grande perigo?

Para não cair na "armadilha" que o uso de uma CSS shorthand pode ter, conheça esta dica importante que pode te poupar de muita dor de cabeça.

O problema é relacionado a shorthands e como elas podem prejudicar seu código [CSS](/categoria/css/).

Isso mesmo: se usadas sem o devido cuidado, shorthands podem trazer resultados que vão te atrapalhar. E muito.

O artigo contém informações relevantes e exemplos práticos, mas assista também ao vídeo de [nosso canal no YouTube](http://bit.ly/dpw-youtube) sobre o assunto:

[Vídeo no YouTube](https://www.youtube.com/watch?v=hm0tb-QPHsw)

## Revisão: o que são shorthands em CSS

Mas, antes de explicar qual é a dica importante ao usar CSS shorthands, é bom revisar **o que são shorthands** (ou **propriedades abreviadas**) de CSS.

Certa vez, publicamos [no nosso Instagram](https://www.instagram.com/desenvolvweb/) a seguinte imagem:

![Imagem mostrando a anatomia de uma regra CSS para melhor explicar o que são shorthands em CSS.](/images/blog/css-shorthands-dica-de-ouro/0002-tutorial-1024x1024.webp)

Esta é a "anatomia" de uma regra CSS: **Seletor**, **Propriedade** e **Valor**.

As shorthands são propriedades de CSS que permitem especificar os valores de outras propriedades de CSS simultaneamente.

Por exemplo, existem muitas propriedades relacionadas a background:

```scss
.c-component {
  background-color: #212121;
  background-image: url(...);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
```

E existe a propriedade abreviada (ou shorthand) de background, em que é possível especificar os valores de outras propriedades de CSS simultaneamente.

Então, seria possível substituir o código anterior por sua shorthand:

```scss
.c-component {
  background: #212121 url(...) no-repeat center / cover;
}
```

Ou seja, a propriedade `background` permite especificar os valores de outras propriedades de CSS simultaneamente, por isso é uma shorthand.

## Dica de ouro para CSS shorthands

Sem mais delongas, esta é a **dica de ouro para você saber como usar shorthands de CSS**:

Sempre que você usa uma shorthand em CSS, são definidos **todos** os valores para **todas** as propriedades correspondentes!

Muitos valores de shorthands são opcionais, mas é assim que as coisas são. Isso não é um bug; é a maneira CSS funciona.

### Exemplo prático dos efeitos de CSS shorthands

Por exemplo:

```scss
body {
  background-repeat: no-repeat;
  background: url(...);
}
```

Ao usar esta regra, mesmo constando que o background não deve se repetir (`background-repeat: no-repeat`), ele irá se repetir. Mas por quê?

É, justamente, pelo que acabou de ser explicado: shorthand definem **todos** os valores para **todas** as propriedades.

Ou seja, já que o valor de `background-repeat` foi omitido da shorthand, isso significa que ele terá seu valor default, que é `repeat`, que sobrescreverá a declaração de `background-repeat` pelo efeito cascata de CSS.

Mas, então, como fazer para arrumar isso? É simples: basta colocar na shorthand o valor explícito de `background-repeat` (sendo possível até apagar a declaração anterior):

```
background: url(...) no-repeat;
```

### Outro exemplo

Mais um exemplo para demonstrar que o uso de shorthands, se não for feito com atenção e conhecimento de como CSS funciona, pode trazer muita dor de cabeça:

```scss
p {
  font-family: sans-serif;
  font-size: 24px;
  line-height: 2;
  font-weight: bold;
  font-variant: small-caps;

  /* As outras props voltam a seus valores default */
  font: 16px serif;
}
```

Como já está explicado no comentário do código, mesmo que se usem várias propriedades anteriormente, ao usar uma shorthand que contemple essas propriedades, as outras propriedades relacionadas voltam a seus valores default.

Num primeiro momento, pode parecer que somente `font-family` e `font-size` foram sobrescritas, mas, na verdade, _todas_ as propriedades anteriores foram!

Este é o cuidado que você deve ter ao usar CSS shorthands.

## Conclusão

CSS Shorthands são um recurso muito útil e bastante usado pela comunidade de CSS. Realmente, elas trazem uma sintaxe mais enxuta e concisa, que ajuda na codificação dos estilos.

Mas é preciso ter _cuidado_ ao usar as shorthands; não saber muito bem como elas funcionam pode acarretar em problemas no código, muita dor de cabeça e muitas horas caçando bugs causados inadvertidamente.

Com a **Dica de Ouro sobre CSS Shorthands**, agora você sabe como usar corretamente esse recurso de CSS e já pode codar com muito mais tranquilidade e consciência do código que está fazendo.

Mas e aí, quais são as horthands que você mais usa no seu código? Comenta aí pra gente saber.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml