Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 03/04/07

Dicas para melhorar seu CSS: Parte 2

Volto a escrever sobre algumas práticas que podem fazer seu [tag]CSS[/tag] render mais e ser mais fácil de ser atualizado, fazendo o seu trabalho e o de sua equipe mais dinâmicos.

Especificidade

Considero que esta seja uma das dicas mais importantes, não muito utilizada atualmente, mas faz muita diferença principalmente nos trabalhos de grande porte, que exigem muitas regras e, consequentemente, id’s e classes em seu CSS.

Sua utilização depende muito do caso, mas pode influenciar em toda a continuação do projeto e, conseqüentemente, poderá dar mais trabalhos futuramente.

Segue um exemplo genérico para exemplificar a necessidade de sua utilização:

#header { color: #fafafa; background: url(../imgs/header_home.jpg) no-repeat; }

Neste exemplo, escrevemos um topo para a página “Home”, por exemplo. Porém, como sabemos, ele será aplicado a todo elemento que tiver a id “header”. Então, teremos que ser mais específicos ao escrever esta regra, aplicando uma classe, caso a página atual seja a inicial, por exemplo:

#header.home { color: #fafafa; background: url(../imgs/header_home.jpg) no-repeat; }

No exemplo acima, definimos que todo elemento com a id “header” que possua a classe “home” tenha as definiçőes impostas. Mas ainda não está bom, pois podemos querer estilizar outros elementos além do header, dependendo da Home. Então podemos, simplesmente, aplicar um id específico para esta página na div que engloba todos os elementos, ou no próprio body. Desta maneira, a gama de possibilidades será muito maior, pois precisaremos aplicar somente um id no html para que tudo se modifique de acordo com ele, por exemplo:

  
    #header { font-size: 16px; color: #fafafa; background-repeat: no-repeat; }
    body#home #header { background-image: url(../imgs/header_home.jpg); }
  

O exemplo acima é diferente em dois pontos: primeiro, defini as propriedades gerais para o elemento com a id “header”, como o tamanho da fonte, cor e repetição do fundo. Depois, o que é específico para o header da Home, no caso a imagem de fundo, especifiquei na linha abaixo.

Acredite, isso fará muita diferença em seu trabalho, pois deixará claro para onde deverá ser utilizada determinada regra, além de poupar ids e classes determinadas para cada página em todos os elementos, bastando nomear um elemento principal, no caso o body ou uma div que englobe todo o conteúdo do site.

Tratei o caso da especificidade de forma mais específica neste artigo, vale a pena ler.

Nomeação de id’s e classes

Também devemos nos preocupar com a nomeação de nossos id’s e classes.

Esta dica não se encaixa perfeitamente no caso do CSS, embora facilite em sua manutenção também.

O recomendável é que, no momento no qual for escrever seu html, dę preferęncia a id’s e classes com significado, ou seja, não aplique nomes determinados pelo aspecto visual do elemento, mas pela função dele no site.

Por exemplo: ao montar a página de produtos de uma determinada empresa, onde cada produto está inserido numa caixa cinza, não aplique o nome “caixacinza” para o elemento mas, por exemplo, “produto”, deixando claro que a classe é utilizada para cada produto, e é nela onde vocę definirá a estilização visual da “caixa cinza”, sempre utilizando a especificidade do CSS, como foi explanada no item anterior deste artigo.

Organização

Essa dica faz muita diferença na manutenção do site. Quando menciono o termo “manutenção” não digo só o seu trabalho ao reabrir o CSS e modificar os elementos, mas falo em facilidade em entendę-lo, tanto por vocę mesmo, quanto por outras pessoas de sua equipe, caso necessitem alterar o código.

Recomendo que vocę escreva seu código ramificando-o pelas seçőes do site, caso seja extenso e bastante ramificado. Há diversas outras maneiras de dividir, tanto pelas colunas, por exemplo, como pelos elementos. Por exemplo:

  
  /* geral */
  * { margin: 0; padding: 0; }
  html, body { background: #fafafa; font: 90% Arial, sans-serif; }
  #limites { width: 750px; margin: 0 auto; }

  /* topo */
  h1 { height: 120px; background-repeat: no-repeat; color: #fff; }

  /* home */
  #limites.home h1 { background-image: url(../imgs/topo_home.jpg);
  #limites.home h2 { border-bottom: 1px solid #333; }
  

Desta forma, primeiramente, defini algumas regras gerais, aplicáveis a elementos pelo site inteiro. Mas logo abaixo, no comentário “home”, especifiquei algumas regras aplicáveis somente ŕs páginas que possuem o elemento com a id “limites” e classe “home”. Também aproveitei para “indentá-lo” para facilitar sua leitura.

Assuntos: CSS, Web Design
Trackback Feed deste artigo

6 comentários para "Dicas para melhorar seu CSS: Parte 2"

  1. Fill | 3/04/07 - 3:47 pm

    Boa, agora começoua ficar mais complexo. Isso realmente faz MUITA diferença em projetos de grande porte.
    Quando as cosias começam a se ramificar muito eu uso o import dentro do css. assim fica mais facil localizar alguma coisa.

    Topo
  2. Yalli Oliveira | 4/04/07 - 8:59 am

    “Neste exemplo, escrevemos um topo para a página Home, por exemplo. Porém, como sabemos, ele será aplicado a todo elemento que tiver a id header.” Oque vocę quiz falar nessa parte do texto? Que eu saiba, não podemos adicionar várias ids como o mesmo nome. Ou estou enganado?

    Topo
  3. Carlos Eduardo de Souza | 4/04/07 - 1:45 pm

    Claro, não podemos definir vários elementos com uma id na mesma página… Mas o que eu quis dizer é com relação a elementos singulares em páginas diferentes, estilizando-os igualmente, por não ser específico ao definir sua regra no CSS.

    Topo
  4. Tiago Celestino | 7/04/07 - 10:10 am

    Muito bom mesmo. Já está até no meu del.icio.us :P

    Topo
  5. Micox | 13/04/07 - 8:49 am

    boas dicas Jader.

    Topo
  6. Micox | 13/04/07 - 8:49 am

    ops. Blog errado:
    Boas dicas Carlos Eduardo.

    Ah, e os botőes de Meta aí abaixo ficaram show mesmo.

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons