Taquigrafia CSS

Bom dia, boa tarde, boa noite! Mais um post sensacional de CSS saindo pra vocês e o tema é: Taquigrafia CSS.

"Mas que raios é Taquigrafia?" Se formos pela etimologia da palavra, significa: escrita rápida (do grego tachys= rápido e grafia= escrita). Na escrita é geralmente usada por meio de símbolos e abreviaturas, que tornam hábil e prático anotar muitas coisas ao mesmo tempo.

Aplicando o conceito acima ao nosso querido CSS, podemos definir que a taquigrafia é nada mais, nada menos do que simplificar as nossas regras declaradas, ou seja, ao invés de definir várias regras para uma mesma propriedade, podemos criar apenas uma.

"Agora entendi o que significa, mas como fazer?" Para aplicar a taquigrafia ao nosso estilo CSS devemos seguir alguns parâmetros, os quais serão explicados ao longo desse post. Espero que o conteúdo esteja claro e objetivo, e, caso haja alguma dúvida, basta comentar abaixo. Boa leitura! :)

Aprenderemos a aplicar técnicas abreviadas (chamaremos a taquigrafia assim) a:

• Fundo (Background)
• Propriedades de Fronteira (Border)
• Cor (Color)
• Fonte (Font)
• Margem ou Espaçamento Externo (Margin)
• Espaçamento Interno (Padding)

Já vimos anteriormente quais são as principais propriedades CSS e seus valores possíveis, porém vimos isso de forma simples, isto é, declarávamos uma regra para cada propriedade, porém vamos aprender como fazer isso em apenas uma linha.

Fundo (Background)

Para o plano de fundo dos elementos HTML nós temos: background-color, background-image, background-repeat, background-attachment e background-position.

Ao invés de inserirmos uma regra para cada uma dessas propriedades, podemos inserir apenas uma ao background, definindo os valores de cada uma das propriedades anteriores separados por espaço.

Exemplos sem e com taquigrafia:

Propriedades de Fronteira (Border)

Quando falamos em taquigrafia de elementos do tipo caixa, isto é, nos quais podemos aplicar estilos em seus quatro lados (top, right, bottom e left), devemos entender que:

• - Se quisermos definir uma propriedade de mesmo valor que afete os quatro lados, deve ser definido apenas um valor;
• - Se a regra tiver valores diferentes para cada lado, devemos definir esses quatro valores na seguinte sequência: Valor de top, Valor de right, Valor de bottom e Valor de Left. Para não ficar muito decoreba, faça uma analogia a um relógio, onde top=12, right=3, bottom=6 e left=9, dessa forma fica mais fácil de lembrar a ordem;
• - Caso a regra tenha valores diferentes paralelamente, ou seja, o valor de top e bottom é um, e o valor de left e right é outro, podemos definir uma regra com dois valores: o primeiro equivalente ao top e bottom (mesma analogia do relógio), o segundo equivalente a right e left;
• - Se quisermos uma regra com valor igual para três lados, por exemplo para top, right e bottom, devemos definir três vezes o valor, seguindo a sequência no sentido horário, e o último valor diferente (equivalente ao left). É claro que podemos ter variações dessa regra, basta praticar seguindo sempre a sequência correta.

Entendida essa questão a respeito dos elementos-caixa, vamos aplicar isso as bordas, utilizando a taquigrafia com as propriedades: border-color, border-style e border-width.

Obs.: Para que a taquigrafia da borda funcione, independente de serem definidos a cor ou o tamanho, sempre devemos indicar qual o estilo, pois quando não o definimos, o navegador adota o valor padrão da regra, que é igual a none.
Além disso, se quisermos adotar diferentes formatações para cada lado da borda, devemos definir border-lado e os valores abreviados dessa propriedade, já que não é possível aplicar diferentes formatações para cada lado dentro da propriedade border.

Exemplos sem e com taquigrafia:

Cor (Color)

"Taquigrafia para cor? Como assim?"

Esse tipo de regra abreviada é mais simples, porém mais específico, pois restringe-se apenas a cores no formato hexadecimal. Para abreviar cores nesse formato, devemos sempre analisar se cada dupla de hexadecimais (RR,GG,BB) tem o mesmo valor, caso sim: a taquigrafia pode e deve ser utilizada, caso não: deixamos do jeito normal.

"E como abreviamos?" Basta definir apenas três valores hexadecimais, sendo o primeiro referente aos dois valores iguais de R, o segundo referente aos valores de G e o terceiro igual aos valores de B. Veja nos exemplos:

Font (Fonte)

Essa com certeza é uma forma de taquigrafia muito útil, porém temos de prestar muita atenção na hora de definir a regra, pois ela deve estar de acordo com os seguintes parâmetros:

• - Sempre devemos definir os valores das propriedades font-size e font-family, repito SEMPRE;
• - O valor da propriedade font-family sempre deve ser definido por último, e este deve ser precedido pelo valor de font-size;
• - Se quisermos definir as outras propriedades: font-style, font-variant e font-weight; elas devem ser declaradas sempre antes de font-size e font-family. Lembre-se de que toda vez que não definimos uma propriedade, o browser adota o valor padrão. (Deixarei no final o link do Guia de Referência CSS para melhor compreensão desses valores default)

Exemplos com e sem uso da taquigrafia:

Margem ou Espaçamento Externo (Margin)

Essa taquigrafia tem como base aquele conceito dos elementos-caixa explicados anteriormente. E tudo que devemos fazer para tornar uma regra de margem abreviada, é definir o valor de cada margem na sequência correta (caso cada lado tenha valores diferentes). Vamos ver isso exemplificado:

Espaçamento Interno (Padding)

Os mesmos parâmetros definidos na margem servem também para o padding, com a diferença de que agora a regra é aplicada dentro do nosso elemento. Vamos aos exemplos:

Assim finalizamos o assunto sobre taquigrafia em CSS, e agora basta praticar os conceitos apresentados, respeitando sempre os parâmetros e tendo sempre em mente a necessidade ou não de abreviar as regras, pois nem sempre queremos definir todas as propriedades de uma só vez. Portanto, use sempre do bom-senso e da necessidade quando for definir formatações no CSS!

Muito obrigado por ter lido até aqui, em breve volto com mais posts interessantes!

Referência

CSS Font Shorthand Rule
Guia CSS W3C (BR)