Shorthand CSS vs. Longhand - Quando usar quais

Taquigrafia e Longhand - uma é concisa e a outra precisa. Um surgiu da necessidade de brevidade, enquanto o outro permanece firme para preservar a clareza. De qualquer forma, eles têm seus propósitos, prós e contras, por assim dizer.

Este post vai iluminar tanto as notações de taquigrafia quanto as notações de longhand, enquanto conclui que é melhor usar para qual situação.

O que é propriedade de taquigrafia?

Propriedade de taquigrafia é uma propriedade que usa os valores para outros conjuntos de propriedades CSS. Por exemplo, podemos atribuir um valor para largura de borda, estilo de borda e Cor da borda usando o fronteira propriedade sozinha.

Basicamente,

 borda: 1px azul sólido; 

é o mesmo que:

 largura da borda: 1px; estilo de borda: sólido; border-color: azul;

Com isso, não precisamos declarar valores de propriedades individuais separadamente (o que é redundante, consome tempo e espaço). Ele também redefine as propriedades à esquerda da declaração, algo que pode ser aproveitado.

Como funciona?

Como mencionado anteriormente, escrevemos um conjunto de outros valores de propriedade em taquigrafia, a ordem não importa se todos os valores de propriedade na taquigrafia são de um tipo diferente como em fronteira. Para propriedades com tipos semelhantes de valores como margem, ordem importa. Em caso de dúvida, lembre-se no sentido horário!

Agora, e se perdermos uma propriedade ou duas na declaração? No exemplo acima, digamos que ignoramos estilo de borda.

 borda: 1px azul; 

Não poderemos mais ver as bordas, não porque a propriedade abreviada não funcionou, mas porque a estilo de borda que deixamos de fora, temos o valor padrão Nenhum. É assim que essa propriedade abreviada foi renderizada.

 borda: 1px nenhum azul; 

Agora vamos soltar o 1px para largura de borda e mantenha os outros dois:

 borda: azul sólido;

Nós poderemos ver as bordas, apenas com uma largura mais espessa e isso porque largura de borda propriedade obteve o valor padrão médio.

 borda: azul sólido médio; 

Isso conclui para nós que quando um valor de propriedade é deixado de fora em uma declaração abreviada, essa propriedade assume seu valor padrão (mesmo que tenha que anular qualquer valor anterior atribuído para o mesmo).

Se houver largura da borda: 1px; para um elemento em algum lugar antes borda: azul sólido; para o mesmo, a largura da borda será médio (o valor padrão), não 1px.

Outra coisa que vale a pena mencionar é que não podemos usar valores como herdar, inicial ou não definido, que estão disponíveis para todas as propriedades CSS, na notação abreviada. Se usarmos isso, o navegador não poderá saber exatamente qual propriedade esse valor deve representar na taquigrafia - a declaração inteira será descartada.

o todos propriedade

Há uma propriedade abreviada de CSS que pode definir o valor para todas as propriedades CSS. Valores de todo o CSS herdar, inicial e não definido são aplicáveis ​​a todas as propriedades e, portanto, estes são os únicos valores aceitos pelo todos propriedade.

 div all: initial

Isso fará com que o div elemento vala TODOS os valores de propriedade CSS que possui e redefine o valor padrão em cada um deles.

⚠ Atenção

Não vamos abusar do todos propriedade. A necessidade disso pode surgir apenas em circunstâncias muito raras, quando não formos capazes de tocar em qualquer código CSS anterior de um elemento que desejamos aplicar essa propriedade..

Nota: Propriedade CSS cor toma o valor hexadecimal com notação abreviada se os dois números do valor hexadecimal em cada canal de cor forem os mesmos. Por exemplo, fundo: # 445599; é o mesmo que fundo: # 459;.

O que é propriedade de longhand?

o propriedades individuais que podem ser incluídos em uma propriedade abreviada são chamados de propriedades longhand. Alguns exemplos são; imagem de fundo, margem esquerda, animação-duração, etc.

Por que devemos usá-lo?

Mesmo que as alternativas de taquigrafia sejam úteis, elas têm uma desvantagem. Lembre-se de que, no começo, vimos como o atalho substitui qualquer propriedade excluída por seus valores padrão? Isso pode ser um problema se a redefinição não for desejada.

Levar a Fonte propriedade abreviada por exemplo. Vamos usá-lo no h4 elemento (que tem um estilo de navegador padrão intensidade da fonte: Negrito)

 fonte: 20px "correio novo"; 

No código abreviado acima, nenhum valor existe para o espessura da fonte propriedade, daí a intensidade da fonte: Negrito(estilo padrão do navegador) será substituído pelo valor padrão peso da fonte: normal causando o h4 elemento a perder seu estilo arrojado, que pode não ter sido pretendido.

Então, para o exemplo acima, simples duas propriedades de longhand, tamanho da fonte e família de fontes são perfeitos.

Além disso, usando taquigrafia para atribuir apenas um ou dois valores de propriedade não é muito útil. Por que dar ao navegador um trabalho extra para interpretar todas as propriedades (incluindo as deixadas de fora) na taquigrafia, quando apenas uma é necessária para funcionar??

Deixando de lado a produção, durante o estágio de desenvolvimento, alguns desenvolvedores (especialmente iniciantes) podem achar que usar a notação de longhand é muito mais fácil de trabalhar do que a abreviação de melhor legibilidade e clareza.

Conclusão

Hoje em dia, com a possibilidade de codificação rápida (com a ajuda de ferramentas como Emmet) e minificação, uma alta confiabilidade na taquigrafia não é necessária, mas, ao mesmo tempo, é muito lógico digitar margem: 0;. O contexto em que preferimos nossas notações CSS irá variar e tudo o que temos a fazer é descobrir qual notação funcionará melhor para nós e quando.