A taquigrafia é um método que permite abreviar a escrita, tem como principal objetivo a facilidade e melhoria da velocidade da digitação.
Bastante utilizada e de grande importância na implementação do CSS, com a adaptação de conceitos taquigráficos, tornamos nossos códigos mais limpos e com menos linhas, dessa forma sua manutenção se dá de maneira mais simples e direta.
Como visto no post sobre Propriedades CSS, cada propriedade pode ter diversos valores.
Evitando sempre a redundância no código, repeti-las é considerado um crime hediondo, devemos sempre nos lembrar de que um verdadeiro desenvolvedor utiliza os códigos com sabedoria, então pra que repetir algo que já está lá?! Abaixo as técnicas de abreviação.
Técnicas abreviadas para fundo:
Resultado:
Técnicas abreviadas para propriedade de fronteira:
São denominadas propriedades de fronteira, todas as propriedades que nos permitem separar áreas de conteúdos para reorganizá-los de alguma forma no layout. São elas:
- Border;
- Margin;
- Padding.
Obs: alguns consideram propriedades de fronteira somente as bordas, deixando as margens internas e externas fora dessa categoria.
Essas propriedades tem um aspecto em comum, que são seus quatro lados (top, right, bottom e left), portanto seus parâmetros devem ser especificados para eles.
Bordas:
Servem para delimitar espaços, organizar áreas e facilitar sua manipulação.
Técnicas abreviadas para bordas:
Resultado:
Importante ressaltar sobre as margens e paddings: Quando usamos taquigrafia, as definições serão aplicadas iniciando do topo e seguindo sempre no sentido anti-horário (top, right, bottom, left), então, quando formos adicioná-las devemos prestar atenção nessa ordem. Quando as margens tiverem a o mesmo espaçamento, não é necessário colocar mais de uma vez.
Técnicas abreviadas para margens:
Resultado:
Paddings
Técnicas abreviadas para o padding:
Resultado:
Fontes
As fontes também podem ter todas as suas propriedades definidas através de uma única declaração. Sabemos que de um modo geral, seus atributos são: size, weight, Family, style e variant.
Sintetizar essas declarações é bastante simples, usamos a tag “font” e depois dela adicionamos todos os seus atributos, todavia, se tratando de fontes devemos nos atentar à ordem dos atributos, pois ela é importante para o funcionamento do código.
Técnicas abreviadas para fontes:
Resultado:
Cores:
Quando mexemos com CSS, a opção mais abrangente de identificação de cores que podemos ter são os valores hexadecimais. Esses valores são definidos por 6 caracteres, que vão de 0 à F.
As cores só podem ser taquigrafadas caso seus valores sejam repetidos nas mesmas posições (FF0044) ou forem todos iguais (CCCCCC).
A regra é simples, onde aparecem 2 letras / números iguais, substituímos por um só.
Técnicas abreviadas para cores:
Resultado:
0 comentários:
Postar um comentário