Propriedades Abreviadas CSS Mais Comuns

Uma abreviação CSS define várias propriedades longas de uma só vez, e qualquer propriedade longa omitida é redefinida para o valor padrão da abreviação — o que silenciosamente substitui qualquer valor definido anteriormente na cascata.

Se você já definiu background-size: cover e viu ele desaparecer no momento em que uma linha background: posterior entrou em produção, você aprendeu isso da maneira mais difícil. Nada gera erro, o que é exatamente o que torna esse problema tão difícil de rastrear. Esse comportamento específico, e não a sintaxe, é a origem da maioria dos bugs com abreviações. Esta referência cobre as seis abreviações que você escreve diariamente (margin, padding, border, font, background e flex), com as ordens de valores, valores obrigatórios e armadilhas de redefinição que fazem cada uma falhar silenciosamente.

Por que uma abreviação CSS redefine outras propriedades?

Toda abreviação CSS se expande em um conjunto fixo de propriedades longas, e um valor que você não especifica é definido para um padrão determinado pela abreviação, que substitui qualquer valor definido anteriormente para essa propriedade longa. Escrever background: red não define apenas a cor; também redefine background-image, background-position, background-size e todas as outras propriedades longas de background para seus valores iniciais.

É por isso que o bug mais comum com abreviações nunca é um erro de sintaxe. É uma abreviação posterior que silenciosamente redefine uma propriedade longa definida corretamente em outro lugar:

/* Bug: a abreviação redefine background-size para auto */
.hero {
  background-size: cover;
  background: url('hero.jpg') no-repeat center;
}

/* Correção: mantenha o size dentro da abreviação */
.hero {
  background: url('hero.jpg') no-repeat center / cover;
}

Essa falha é invisível na própria declaração e frequentemente só se manifesta na página renderizada. Reproduzir uma sessão em produção reconstrói os estilos computados reais, o que revela o background-size colapsado que uma verificação local com assets diferentes pode não detectar.

margin e padding: a regra do sentido horário

margin e padding aceitam de um a quatro valores no sentido horário a partir do topo: superior, direito, inferior, esquerdo (TRBL, as consoantes de “trouble”). A quantidade de valores determina quais lados são espelhados:

.button  { padding: 12px 24px; }   /* vertical 12px, horizontal 24px */
.section { margin: 40px auto; }     /* vertical 40px, horizontal auto */

margin: 0 auto centraliza um elemento de bloco horizontalmente ao dividir igualmente o espaço inline disponível. Não tem efeito em elementos inline, e itens flex ou grid se centralizam por meio de suas próprias propriedades de alinhamento.

border: o estilo é obrigatório

Na abreviação border, os valores de largura, estilo e cor são independentes de ordem, pois são de tipos distintos: 2px solid red e solid red 2px são equivalentes. Porém, border-style é obrigatório: seu valor inicial é none, portanto, sem um estilo, a borda não renderiza nada, independentemente da largura ou cor.

.card { border: 1px solid #e0e0e0; }  /* renderiza */
.card { border: 1px #e0e0e0; }        /* sem estilo → nada é renderizado */

Largura e cor são opcionais e assumem seus valores padrão (medium e currentcolor). Defina o estilo primeiro por hábito e essa classe de bug desaparece.

font: size e family são obrigatórios

A abreviação font combina font-style, font-variant, font-weight, font-size, line-height e font-family, e tanto font-size quanto font-family são obrigatórios. Omitir qualquer um deles faz com que toda a declaração seja ignorada. A ordem é rígida: style, variant e weight devem vir antes de font-size, e line-height só é válido imediatamente após font-size, separado por uma barra.

/* completo: style variant weight size/line-height family */
.text { font: italic small-caps bold 16px/1.5 'Segoe UI', sans-serif; }

/* declaração mínima válida */
.text { font: 16px Arial, sans-serif; }

/* inválido — family antes de size, silenciosamente descartado */
.text { font: Arial 16px; }

Como font redefine todos os componentes omitidos para seus valores iniciais, aplicá-la após ter definido, por exemplo, font-weight em outro lugar irá redefinir esse peso de volta para normal.

background: a barra entre position e size

background é a abreviação mais propensa a erros. A regra que mais confunde os desenvolvedores: background-size só é válido imediatamente após background-position, separado por uma barra (center / cover). Portanto, um size sem uma position antes da barra é inválido e é descartado. Isso corrige guias mais antigos que tratam background-size como necessitando de uma declaração separada; ele pertence à abreviação.

A sequência canônica de valores é: image, position / size, repeat, attachment, origin, clip, color.

/* correto: position / size */
.panel { background: #000 url('bg.jpg') center / cover no-repeat fixed; }

/* errado: size sem position antes da barra → inválido */
.panel { background: url('bg.jpg') / cover; }

/* errado: sem barra, então 'cover' é interpretado como um segundo valor de position */
.panel { background: url('bg.jpg') center cover; }

A cor pode aparecer em qualquer lugar na sintaxe de camada única, mas mantê-la por último segue a ordenação do MDN e garante consistência na leitura.

flex: flex: 1 não é 1 1 auto

Os navegadores computam flex: 1 como flex: 1 1 0%, e não 1 1 auto, portanto o item ignora sua própria largura e tamanho de conteúdo ao distribuir o espaço. Os navegadores usam um flex-basis de 0% quando um único número é fornecido, mesmo que o texto da especificação diga 0. Você pode confirmar isso no DevTools abrindo a aba Computed e lendo flex-basis.

.grow  { flex: 1; }          /* 1 1 0%  — cresce, ignora o tamanho do conteúdo */
.auto  { flex: auto; }       /* 1 1 auto — cresce a partir do tamanho do conteúdo */
.fixed { flex: 0 0 200px; }  /* faixa fixa de 200px, sem grow/shrink */
.none  { flex: none; }       /* 0 0 auto — dimensionado pelo conteúdo, rígido */

Use flex: auto quando quiser que os itens sejam dimensionados pelo conteúdo, e flex: 0 0 <size> para uma faixa de tamanho fixo.

Quais são os erros mais comuns com abreviações CSS?

Quatro padrões de falha respondem pela maioria dos bugs com abreviações. Cada um é uma consequência direta de uma regra acima:

1. Uma abreviação posterior redefine uma propriedade longa. Uma substituição de tema que envia background: apaga um background-size: cover anterior. Mantenha o valor na abreviação ou aplique a propriedade longa depois dela.
2. font-family ou font-size ausentes. Toda a declaração font é descartada, sem aplicação parcial.
3. border-style ausente. Sem estilo, o padrão é none, portanto nada é desenhado.
4. background-size sem position e barra. Escreva center / cover, nunca um cover isolado.

Abreviações menos usadas como list-style, outline e place-items seguem as mesmas regras de redefinição, mas aparecem com muito menos frequência; use-as da mesma forma assim que as seis do dia a dia se tornarem naturais.

O único hábito que previne quase todos esses problemas: trate cada abreviação como uma redefinição completa do seu grupo de propriedades, e não como um ajuste aditivo. Quando um estilo definido em outro lugar desaparecer, abra o painel Computed e verifique se uma abreviação posterior o sobrescreveu. Esse é quase sempre o culpado.

Perguntas Frequentes

Quando devo usar abreviações CSS em vez de propriedades longas?

Use abreviações quando quiser definir a maioria ou todas as propriedades de um grupo de uma só vez e estiver disposto a redefinir os valores omitidos para seus padrões. Use propriedades longas quando precisar alterar uma única propriedade sem afetar as demais, como ajustar apenas background-size mantendo um background-image existente intacto. A abreviação sempre redefine as propriedades longas omitidas, portanto um ajuste pontual com a propriedade longa evita esse efeito colateral.

Por que adicionar uma abreviação background quebra meu background-size: cover?

Porque uma abreviação background redefine todas as propriedades longas de background que você não especifica de volta para seus valores iniciais, e background-size é redefinido para auto. Se background-size: cover estiver definido em uma regra anterior e uma declaração background: posterior omitir o size, essa abreviação posterior o sobrescreve. Corrija escrevendo o size dentro da abreviação após a position, como center / cover, ou colocando a propriedade longa background-size após a abreviação.

Qual é a diferença entre flex: 1 e flex: auto?

Os navegadores computam flex: 1 como 1 1 0%, atribuindo um flex-basis de 0% para que o item ignore seu próprio tamanho de conteúdo e cresça puramente a partir do espaço disponível. flex: auto se expande para 1 1 auto, portanto o item começa pelo seu tamanho de conteúdo e então cresce. Use flex: 1 para colunas iguais independentemente do conteúdo, e flex: auto quando os itens devem ser dimensionados em relação ao que contêm.

A ordem dos valores importa na abreviação border?

Não, os valores de largura, estilo e cor na abreviação border são independentes de ordem, pois são de tipos distintos, portanto 2px solid red e solid red 2px são equivalentes. O único requisito obrigatório é que border-style esteja presente. Seu valor inicial é none, portanto, sem uma palavra-chave de estilo, a borda não desenha nada, independentemente da largura ou cor fornecidas.