As Dicas de CSS que você não deve deixar de saber

Desenvolver dentro dos padrões web exige algumas capacidades que vão muito além do conhecimento técnico. Desenvolver bem sua folha de estilos é a certeza de que manutenções futuras serão mais fáceis de serem implementadas. Mas saber bem CSS sem conhecer semântica não vai adiantar muito. De qualquer maneira, conhecer algumas dicas de CSS é uma parte muito importante do todo, que é o desenvolvimento para web.

Os conselhos que dizem que XHTML não é algo para iniciantes tem sua justificativa e não consigo ver que uma perfeita aplicação de CSS não esteja intimamente relacionada com a maneira com que você escreve o seu XHTML. Mesmo que não seja XHTML com o mime type correto antes que alguém se preocupe com isso. É preciso várias considerações conjuntas para poder avaliar a qualidade de um trabalho. E a validação não é uma delas. Prefiro ter meu site semântico com alguns erros de validação do que o contrário. Escrever um XHTML cheio de divs, cheio de classes e se gabar de um CSS bem feito é jogar confete em si mesmo. Se você considerar que seus conhecimento de CSS não são algo em si mesmo, e sim parte de um conjunto de conhecimentos (user agents, XHTML, semântica etc) que necessariamente deve estar agregado a outros, com o tempo você vai ver que o conjunto dessas coisas não são tão simples assim. Mas como tudo que se aprende na vida deve ter um começo, vamos ver algumas dicas importantes de CSS.

É o conjunto completo (e não apenas CSS) que pode te fazer ser um desenvolvedor de nível avançado ou apenas um iniciante. Neste texto eu vou revelar as principais dicas e macetes apenas de CSS que eu utilizo no dia à dia e muitas delas vieram do Roger Johansson do 456 Berea Street. A idéia deste texto surgiu quando por curiosidade eu tirei um dia para ficar analisando o CSS de muitos clientes antigos, sites gringos famosos e conversando com pessoas. Até avaliando meus próprios trabalhos mais antigos eu pude ver quantos erros bobos eu cometia e que poderiam ser facilmente evitados. Vamos as dicas.

Vamos resumir as coisas

Cada caracter ou espaço em branco no seu CSS ocupa “espaço” e ajuda a aumentar o tamanho físico do seu arquivo. Por isso aprender a resumir as coisas é muito importante e pode reduzir seus CSS em até 50% dependendo da forma como você o implementa. Veja como resumir algumas coisas.

Resumo de Cores

Para trabalhar com cores, pessoalmente eu utilizo apenas valores hexadecimais. Isto varia de profissional para profissional, mas no geral, eu já me acostumei bem a elas e usando valores hexadecimais eu consigo resumir o valor de muitas das cores que eu utilizo nos meus projetos.

Valores hexadecimais são um conjunto de 3 valores (RGB ou HSB ou LAB que podem ser convertidos em valores hexadecimais) e cada um destes 3 conjuntos é formado por dois dígitos alfanuméricos. Vamos pegar por exemplo o amarelo que em RGB teria os seguintes valores: R=254 G=204 B=00. Se você utilizar um programa que converte estes valores de RGB em hexadecimais você teria R=FF G=CC B=00. Quando o conjunto de valores hexadecimais são formados por pares de caracteres iguais, você pode escrevê-los no CSS de forma resumida da seguinte maneira:


color=#FFFFFF - que é equivalente a  - color:#FFF
color=#995522 - que é equivalente a  - color:#952
color=#CCDD55 - que é equivalente a  - color:#CD5
color=#CCCCCC - que é equivalente a  - color:#CCC

Resumindo Bordas e Outlines

As bordas geralmente são formadas por declarações que indica o tipo de borda ( border-style ), a cor ( border-color ) e a espessura ( border-width ) dela como no exemplo abaixo.


h1 {
     border-style:solid;
     border-color:#000000;
     border-width:1px;
   outline-width:10px;
   outline-style:solid;
   outline-color:#FFCC00;
    }

A linha acima pode ser resumida em:


h1 { border:1px solid #000; outline:10px solid #FC0; }

Se precisar declarar alguma borda específica e não os 4 lados de um elemento, minha dica é a seguinte:


h1 {
    border-top: 1px solid #F90;
    border-left: 1px solid #999;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #000;
}

Ainda assim você economizou muita coisa.

Resumindo Backgrounds

Backgrounds são outro conjunto de declarações que se você não resumir você pode aumentar desnecessariamente o tamanho do conjunto de declarações. Talvez você tenha aprendido a declarar algo da seguinte maneira.


body {
          background-color:#FC0;
       background-image:url("../imagens/foto.gif");
       background-repeat:no-repeat;
       background-attachment:fixed;
       background-position:0px 15px;
    }

As declarações acima correspondem a cor (background-color), imagem de background (background-image), repetição (background-repeat), tipo de fixação (background-attachment) e posicionamento (background-position). Você pode resumir isto tudo em apenas uma única declaração:


body {
background:#FC0 url("../imagens/foto.gif") 0px 15px  no-repeat fixed;
}

Se acontecer como no caso acima de você além de ter uma imagem como background ainda ter que declarar uma cor, é muito importante que a cor seja declarada na frente da imagem para não ter problemas.

Resumindo Fontes

Uma “regra” de CSS completa de font poderia ter um grupo de declarações da seguinte maneira:


.wrap {
    font-size:0.9em;  
    line-height:1.2em;
    font-family:Arial, Helvetica, sans-serif
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    }

As declarações acima se referem ao tamanho da fonte (font-size), espaçamento entre as linhas (line-height), família da fonte (font-family), estilo (font-style), variação entre caixa alta e normal (font-variant), e “peso” da fonte (font-weight). Isso tudo pode ser resumido em uma única declaração:


.wrap {
font:italic small-caps bold 0.9em/1.2em Arial, Helvetica, sans-serif ;
}

.wrap {
font:0.9em/1.2em Arial, Helvetica, sans-serif italic small-caps bold;
}

Corrigido meu erro conforme feedback do Cleiton.

Browsers bugs

Geralmente um grande problemas que temos que enfrentar no CSS é fazer algumas correções específicas para o Internet Explorer principalmente por causa do box model hack. Independente do Internet Explorer, é comum que os browsers já tenham seus valores de paddings e margins padrões para alguns dos elementos de XHTML. Uma dica importante que eu aprendi é zerar estes valores e declarar tudo do zero ao invéz de tentar encontrar soluções posteriores para valores de paddings e margins. Você pode fazer isso à partir da seguinte declaração:


* { margin:0; padding:0; }

Você deve declarar este macete bem no início do seu CSS, antes mesmo de declarar o body e o restante das regras que criar. Como uma folha de estilos funciona em “cascata”, você deve usar esta regra acima de todas as outras. Fazendo assim, você zera as diferenças entre os browsers, o que te permite ter um maior controle sobre o pocisionamento dos elementos.

Estilos em cascata

Aprenda a declarar tomando proveito das propriedades em cascata do CSS. Se você vai usar basicamente um único tipo de fonte no site todo, não fique declarando font em todos os elementos, basta declarar no body por exemplo. Os elementos inseridos dentro do próprio por padrão vão pegar os atributos declarados anteriormente. O segredo de aprender a declarar é saber quando e como e não simples conhecer todas as declarações do CSS.

Quer expandir seus horizontes?

Concurso de dicas de CSS

O legal da web é a maneira com que nós conseguimos compartilhar informações. Essas foram algumas das dicas que eu utilizo, mas com certeza você tem uma dica ou outra escondida na manga não tem? Então você pode comentar aqui neste post e dar outras dicas de CSS que você quiser e achar mais relevante. As melhores dicas e as que forem melhor explicadas serão inseridas neste mesmo artigo onde através de um update e te dar os devidos créditos. Ou seja, este artigo ainda vai crescer e muito. Não acaba aqui.

Comente também sobre qual dica, seja ela do meu artigo ou postada por alguém nos comentários, você achou mais interessante. Esta aberto oficialmente o concurso de dicas de CSS! Ajude a divulgar este artigo e juntos vamos transformar esta página em uma referência legal de dicas.

  • lzyqgqnyay

    owwiqsfwpmvdbp, svwjgqvjbz

  • lsinwpqppp

    rsvphsfwpmvdbp, qpcvrpslkn

  • hcfrwtrqrr

    dhbvysfwpmvdbp, tkuhpzkrhq

  • oupvebssxn

    kgfblsfwpmvdbp, taueoipwma

  • rkfqnwhinf

    ntuzusfwpmvdbp, jnumramway

  • ynleuhnogb

    kokifsfwpmvdbp, bymkksjggm

  • http://e.freewebhostingarea.com/not-found.html Pedro Rogério

    Legal Henrique, coloquei um link para esse artigo lá no meu blog!!!

  • Cleiton Francisco

    Em "Resumindo fontes", você usou a seguinte declaração:

    <code>

    .wrap {

    font:0.9em/1.2em Arial, Helvetica, sans-serif italic small-caps bold;

    }

    </code>

    Mas creio que há um pequeno equívoco em relação à posição dos elementos dessa declaração.

    Na especificação do W3C (http://www.w3.org/TR/CSS21/fonts.html#font-shorthand) a sequência correta é: font-style font-variant font-weight *font-size*/line-height *font-family*

    Sendo que apenas font-size e font-family são obrigatórios. Dessa forma a declaração acima, reescrita, ficaria assim:

    <code>

    .wrap {

    font: italic small-caps bold 0.9em/1.2em Arial, Helvetica, sans-serif;

    }

    </code>

  • Junio Vitorino

    Nossa, que show esse poste eu vou divulgá-lo em minha assinatura, parabéns e espero ver mais dicas ai pessoal.

    Ps.: Henrique a muito venho querendo aprender mais sobre semântica algumas pessoas ja avaliaram meu css e dizem sempre que esta bom, mas sei que o problema ta no meu xhtml que não tem muita semântica. Você não saberia de nada que eu possa ler para me ajudar com a semântica?

  • Lourenço Rizz

    A busca do seu site ficou muito legal!!!

    Parabéns pela inovação.

  • Max

    Primeiro:

    Também gostei bastante da busca, vale roubar a idéia?! :-)

    Segundo:

    A idéia de fazer um repositório de dicas é bem legal.

    Terceiro: deixe-me tentar contribuir…

    Já passei várias vezes pelo problema em sites com duas colunas, um menu lateral com um background, e outro coluna com o texto, mas os "donos" do site não se conformam com o background do menu não ter o mesmo tamanho do background do texto. Daí a gente sai colocando aquele monte de divs e tal, até chega a um ponto que nem isto resolve mais, montei o seguinte hack, pra fazer com que o box cresca junto com o conteúdo (como padrão do IE), e tenha um tamanho mínimo como é necessário para se ter colunas de mesmo tamanho.

    <code>

    #menu {

    min-height: 320px; /* tamanho mínimo do padrão */

    height: auto !important; /* cresce junto com o conteúdo */

    height: 320px; /* seta o tamanho do IE */

    }

    #content {

    min-height: 320px;

    height: auto !important;

    height: 320px;

    }

    </code>

    Desculpe pelo excesso de texto :-)

  • Max

    desculpe tenho de corrigir esta gafe:

    #menu, #content {

    min-height: 320px; /* tamanho mínimo do padrão */

    height: auto !important; /* cresce junto com o conteúdo */

    height: 320px; /* seta o tamanho do IE */

    }

  • http://fator-s.com.br/ Estevis

    muito util o artigo….

    pelo q me lembro, existe tambem a forma de simplificar margin-width, padding, border-width;

    ex.

    margin-width: 1px; /*todos os lados iguais*/

    margin-width: 1px 0; /*os lados de cima e de baixo primeiro(1px) e depois os lados esquerdo e direito (0)*/

    margin-width: 1px 0 2px; /* lado de cima primeiro(1px), esquerda e direita no meio(0) e depois lado de baixo (2px)*/

    margin-width: 1px 0 2px 3px; /*lado de cima(1px), direita(0), baixo(2px) e esquerda(3px)*/

    isso serve tanto para margin-width como para padding e border-width.

  • http://emanuelslima.blogspot.com Emanuel Santos Lima

    Com certeza muito boas as dicas, tb tento sempre deixar os meus css resumidos, facilitando o carregamento pelos User Agents, como sempre Henrique bom artigo!! Continue assim!

  • Pedro

    Parabéns pelo artigo, muito útil.

    Porém a dica que diz para zerar margin e padding no início do CSS, dá um pequeno bug no IE, pois as listas ficam automaticamente sem marcação(list-style-type).

  • Bartus

    @Estevis: Não é necessário colocar "margin-width", somente "margin: 1px 2px 1px 2px;"

    E para o "Global Reset" (*), o que eu faço é logo após ele já redeclarar os valores das tags básicas seguindo exemplo do leftjutified :

    * {

    padding:0;

    margin:0;

    }

    h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, label, ul, ol, dl, fieldset, address { padding:10px 0; }

    li, dd, blockquote { margin-left: 40px; }

    fieldset { padding:10px; }

    img {border: 0;}

  • http://www.brunodulcetti.com/blog/ Bruno Dulcetti

    Legal… escrevi um artigo sobre isso também para o imasters… q englobou isso e mais um pouco tb… .

    falowww

  • http://www.robsonsobral.com [- sObRaL -]

    No exemplo de borda, não é mais simples fazer isso?

    h1 {

    border-style: solid;

    border-width: 1px;

    border-color: #F90 #FFF #000 #999;

    }

    É só lembrar de seguir o sentido horário a partir de "top".

  • http://fator-s.com.br/ Estevis

    @Bartus…..Valeu a correção….foi péssimo meu deslize….

  • Vedovelli

    Bom dia! Muito interessante a solução, principalmente pela eliminação do delay do formato original. Porém, se colocado em todos os links (ou todos os elementos que aceitam o atributo title) acaba sendo irritante (opinião pessoal). Se usado com critério, como por exemplo em menus, é uma excelente solução para dar uma prévia do que será encontrado após o click!

    Um abraço e obrigado pela indicação!

    Vedovelli

  • http://www.rd5.net Tiago

    Quando for resumir o código da borda, as veses no firefox não é compativel.

    #div1{border:1 solid #000;}

    então usando:

    #div1{border-width:1px;border-style:solid;border-color:#000;}

    fica certo.

  • Pingback: Top 10 formas de melhorar a performance de um website! « CANTINHU NOSSO

  • Pingback: CaseHost » Blog Archive » Top 10 formas de melhorar a performance de um website!

  • Pingback: Top 10 formas de melhorar a performance de um website!| Só mais um blog do WordPress| logicahost.com.br/hospedagem

  • Bruno

    #Tiago – O problema do resumo de codigo nao eh pq estah faltando a unidade de medida? O correto nao seria

    #div1{border:1px solid #000;}

  • http://www.gtsdesign.com.br Alexandre

    bom post Henrique, parabéns.

    body,td,th {}
    a {}
    a:link {}
    a:visited {}
    a:hover {}
    a:active {}
    h1 {}
    h2 {}
    h3 {}
    h4 {}
    h5 {}
    h6 {}
    img {border: 0;}

    normalmente utilizo essas tag antes da minha wrapper. abraços…