CSS Shorthands: Dica de Ouro

É 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.

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 sobre o assunto:

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 a seguinte imagem:

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:

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:

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:

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):

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:

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.