NumClique - Informar é simples!

Como já confessado aqui no blog, tenho uma grande mania de acessar os códigos fontes dos sites que eu acesso e não só o fonte do HTML… acesso também o CSS, que é a minha grande paixão em relação ao desenvolvimento WEB.

É uma pena certas coisas com que eu me deparo… Não só de erros bizarros, não estou incluindo os hacks aqui não. Mas muito erro de escrita, atributo repetido, valores dos mais estranhos possíveis, atributo sobrescrito entre tantas outras coisas.

Hoje decidi escrever um breve tutorial com umas dicas básicas de CSS e sua aplicação. Ap aplicar estas dicas, você ganhará muito mais agilidade no desenvolvimento e alteração de qualquer coisa do seu layout, que é uma das maiores vantagens de se desenvolver com CSS.

A primeira dica seria sobre a abreviação de atributos e valores a determinado seletor.

Como é encontrado por aí?

#exemplo {
margin-top:10px;
margin-right:30px;
margin-bottom:20px;
margin-left:10px;
}

Isso poderia ser escrito da seguinte maneira:

#exemplo {
margin:10px 30px 20px 10px;
}

E o resultado seria o mesmo… Mas vale-se ressaltar que existe uma certa ordem na maneira de abreviar os valores. Ao se definir a propriedade como mencionado acima, você deve iniciar a ordem pelo “top” e seguir em sentido horário - por favor… sem piadinhas de relógio digital - até o “left”, ou seja, fica assim a ordem…

#exemplo {
margin: [top] [right] [bottom] [left];
}

Outra maneira de abreviar estes valores seria caso tivéssemos a seguinte situação:

#exemplo {
margin:10px 30px 10px 30px;
}

Onde o valor de top e bottom são iguais e right e left tbm… isso seria escrito assim:

#exemplo {
margin:10px 30px;
}

Ou seja… podemos abreviar assim quando temos:

seletor {
margin:[top / bottom] [right / left];
}

Isso serve para o padding também… Ah! Para você que não entende a diferença entre o margin e o padding… é o seguinte… imagine uma caixa, o espaço entre a parte externa e outro objeto é o margin… o espaço interno entre a “parede” da caixa e o objeto interno é o padding…

Mas… vamos lá… a segunda dica seria sobre o atributo font…

Como é encontrado por aí?

#exemplo2 {
font-style:bold;
font-size:14px;
font-family:Verdana;
}

Isso poderia ser escrito da seguinte maneira:

#exemplo2 {
font:bold 14px Verdana;
}

Para a este atributo tem-se uma ordem também, pois… temos que zelar pelo padrão! A ordem para o atributo font é o seguinte:

seletor {
font: [estilo] [variação] [peso] [tamanho]/[altura] [família];
}

A terceira dica poderíamos dizer que seria a questão de agrupamento de seletores com os mesmos valores, ou seja… se você tem a seguinte situação:

#exemplo3_1 {
margin:10px 5px 6px 3px;
color:#F90;
font:bold 14px Verdana;
}

E logo abaixo em seu CSS…

#exemplo3_2 {
margin:10px 5px 6px 3px;
color:#F90;
font:bold 14px Verdana;
}

Você poderia juntar estes dois seletores apenas os separando por vírgula… da seguinte maneira:

#exemplo3_1, #exemplo3_2 {
margin:10px 5px 6px 3px;
color:#F90;
font:bold 14px Verdana;
}

A quarta dica se aplica às cores, pois até elas podem ser abreviadas, sabia? Pois é, se você tem a cor laranja que de modo hexadecimal é escrita da seguinte maneira #FF9900, você pode escrevê-la simplesmente assim: #F90, isso vale també para o cinza puro #CCCCCC que pode se escrito #CCC… vale-se ressaltar que isso é aplicado à cores onde sua trinca de pares é de números e/ou letras iguais… tipo… o Vermelho rubro que é #CC3300, pode ser escrito #C30…

A quinta e última dica, poderíamos descartar os exemplos, pois se aplica a nós mesmo que seria a questão de sermos organizados na maneira de desenvolvermos nossas folhas de estilo. A questão de agrupar, muitas vezes da um trabalho bem maior, mas se você, por exemplo, quiser mudar a cor de todas as fontes do seu site, será muito mais rápido e fácil caso os elementos de determinada cor estiverem juntos, daí você muda somente uma linha de código e pronto… e não é feitiçaria é tecnologia! Caso você tenha aplicado a cor laranja (#FF9900) em todos os títulos de seu site, mas para cada área você o escreveu novamente, na hora de fazer a alteração você terá q ir linha a linha procurando a bendita cor e mudando, ao invés de muda somente uma linha devida à sua desorganização.

Espero que eu tenha sido claro nos exemplos e que tudo tenha ficado mais claro pra você desenvolver melhor!

Forte abraço e até a próxima!