Introdução
Propriedades shorthand são utilizadas no CSS para que com uma única propriedade você consiga definir o valor de múltiplas propriedades.
Na prática isso significa que com apenas uma propriedade, você pode fazer o que faria com 3 ou mais.
E com isso você pode ganhar produtividade no seu desenvolvimento, visto que com menos código, você ainda pode alcançar o mesmo resultado.
Além disso você pode deixar o seu projeto menor e com um código mais organizado, pois facilita para escrever e dar manutenção.
Esses benefícios já ajudam bastante no dia a dia.
Não são todas as propriedades que tem uma forma mais curta de escrita, nesse post você vai ver algumas delas.
Border
Para as bordas, existem as propriedades border-width, border-style e border-color, com elas você já conseguiria definir o estilo de bordas de um elemento por completo.
Porém o código ficaria algo desse tipo:
border-width: 1px;
border-style: solid;
border-color: black;
Três linhas até que não é tão mal, mas pense declarando isso no projeto todo, para dar manutenção, pode dar trabalho.
Para reduzir isso existe somente a propriedade border, e para definir o mesmo estilo acima, mas com somente uma linha, é dessa forma:
border: 1px solid black;
Primeiro é referenciado a largura, depois o tipo de borda e posteriormente a cor, a cor também poderia ser hexadecimal normalmente.
Background
Outra propriedade que tem shorthand é a background.
A estilização de fundo pode ter diversas variações, de imagem, de cor, tamanho, repetição e entre outros.
Para definir um estilo de fundo poderia ser algo dessa forma:
background-color: #CCCCCC;
background-image: url(...);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
Porém com a propriedade background é possível ter o mesmo resultado dessa forma:
background: #CCCCCC url(...) no-repeat center / cover;
Dentro dessa propriedade é possível colocar todas as variações de background.
Font
Outra propriedade é a font, nela é possível colocar as variações de definição de fontes.
As fontes também podem ter diversas variações, o que torna mais interessante ainda utilizar da forma mais curta.
Um exemplo seria esse:
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1.4em;
line-height: 150%;
font-family: Georgia, "Times New Roman", serif;
Esse código todo também é possível reduzir a somente uma linha:
font: bold italic small-caps 1.4em/150% Georgia, "Times New Roman", serif;
List
A propriedade list tem menos variações, mas ainda sim da para escrever menos código.
Um estilo de lista poderia ser mais ou menos assim:
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
Porém com a propriedade list-style é possível encurtar, colocando essas três propriedades juntas, primeiro o type, depois position e depois image:
list-style: circle inside url(bullet.gif);
Transition
Transition também é muito utilizada, e escrever menos código nessa situação se torna praticamente essencial.
Quem mexe com transições sabe, normalmente as transições dão um efeito bem legal, porém escrever muitas dessas pode ser desgantante.
Um efeito de transição poderia ser algo desse tipo:
transition-property: background, color;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 60ms;
Esse mesmo abreviado fica assim:
transition: background-color 1s ease-out 60ms;
Margin
Talvez o shorthand que eu mais utilize no dia a dia seja o de margin e padding.
Nesse caso a forma abreviada ainda tem algumas variações.
Eu não conseguia decorar como funcionava essa variação, mas descobri uma forma fácil de lembrar.
Um código de margin, poderia ser escrito dessa forma:
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
Esse mesmo código poderia ser escrito somente com a propriedade margin, ficaria assim:
margin: 10px;
Imagine agora que a margem superior e inferior, seja diferente das laterais, dessa forma:
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
Isso ainda poderia ser abreviado, dessa forma:
margin: 5px 10px;
O 5px está relacionado a top e bottom, e o 10px relacionado a left e right.
Agora, em outra situação, pode ser que todos os lados a margem seja diferente:
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
Ai para esse caso ficaria:
margin: 5px 10px 15px 20px;
Nesse caso ficaria 5px no topo, 10px na direita, 15px embaixo e 20px na esquerda.
E para decorar essa ordem, pense em um relógio, a primeira margem sempre vai ser a parte de cima, no caso o 12 do relógio, e depois é só rodar no sentido horário, topo-direita-baixo-esquerda.
Pra mim funcionou bem dessa forma.
Padding
O padding segue a mesma lógica do margin, então para todos os exemplos seria só trocar margin por padding.
Mas para dar um exemplo de padding ficaria assim:
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
Ficaria assim a forma abreviada:
padding: 10px;
Conclusão
As propriedades shorthand são uma forma de escrever menos código e ter o mesmo resultado.
Como citei no começo, utilizar essa técnica pode ter diversos benefícios, de escrita, manutenção do código e entre outros.
Para ver outros canais onde o posto conteúdo sobre CSS veja os Links do Programando Soluções.
Referências
https://webplatform.github.io/docs/guides/css_shorthand/
https://desenvolvimentoparaweb.com/css/css-shorthands-dica-de-ouro/
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Shorthand_properties
https://blog.hubspot.com/website/css-shorthand