Múltiplos valores no CSS

Quando estamos escrevendo um código CSS, as vezes nos deparamos com repetidas propriedades como: background, background-image, background-size. Entretanto isso pode ser resolvido de uma forma muito simples e veremos como fazer isso hoje.

O CSS possui diversos atalhos para facilitar o manuseio de determinadas propriedades e assim evitando repetição e códigos imensos. Um caso muito comum, que sempre vemos, são as propriedades margin e padding, as vezes podemos nos deparar com um código do tipo:

.div {
   padding-left: 2rem;
   padding-right: 2rem;
   padding-bottom: 2rem;
}

O que não está errado, mas também não está da melhor forma. Para resolver isso o CSS disponibiliza atalhos aonde você pode inserir vários valores em uma única propriedade, claro que seguinte um padrão e ordem. No exemplo acima, poderíamos otimizar ele fazendo da seguinte maneira:

.div {
   padding: 0 2rem 2rem
}

Atalho detalhado:

Nessa propriedade você tem 4 maneiras de declarar múltiplos valores, veja:

● Para 1 valor: todos lados tem o mesmo valor.

● Para 2 valores: o primeira valor se aplica ao top e o bottom. E o segundo valor ao left e right.

● Para 3 valores: o primeiro se aplica ao top, o segundo ao right e left e o terceiro ao bottom.

● Para 4 valores, a ordem é: top, right, bottom e left (sentido horário).

Atalhos no CSS grid

No CSS grid existem várias propriedades para montar seu layout, mas também muito atalhos para facilitar seu código, sendo eles:

• grid: aonde você pode definir o grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns e grid-auto-flow.

grid: 500px / 1fr 1fr

Forma uma linha com 500px e 2 colunas de 1fr

• grid-template: que define o grid-template-columns, grid-template-rows e grid-template-areas.

grid-template:
"logo nav nav" 50px
"home" 150px
"home" 100px
/ 100px 1fr 50px;

• grid-column: define grid-column-start e grid-column-end.

grid-column: 1 / 4;

• grid-row: define grid-row-start e grid-row-end.

grid-row: 1 / 3;

• grid-area: define grid-column-end, grid-column-start, grid-row-start, grid-row-end.

grid-area: 3/ 2 / 2 / 4;

• gap: define a row-gap e column-gap.

gap: 1em;

Atalhos no FlexBox

Para o FleBox também temos alguns atalhos e são eles:

• flex-flow: que define flex-direction e flex-wrap.

flex-flow: row wrap;

• flex: define o flex-grow, flex-shrik e flex-basis.

flex: 2 2 500px;

Atalhos background

Para a propriedade temos um atalho muito eficaz, que facilita muito nossa vida. Nós definimos como background e ele pode englobar o background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat e background-size.

Um exemplo usando background-image, background-position, background-size e background-repeat:

background: url(imagem) center / cover no-repeat

Mais atalhos

Caso você queira saber mais sobre atalhos em css, visite a documentação da MDN!

E aí, o que achou? Muito mais fácil né? Esses atalhos facilitam demais, além de deixar seu CSS bem mais clean. Mas não acaba aqui, existem outros atalhos, como o de border, column e entre outros bem interessantes, abordei aqui alguns que considero popular.

Hoje ficamos por aqui, até a próxima! Se estiver gostando, curte e compartilha com os amigos :)