Estruturando o código CSS
De Tableless.com.br – Web Standards com Arroz e Feijão por diego@tableless.com.br (Tableless.com.br)
Este era um assunto que eu queria falar aqui a muito tempo. Vi este link no URL Sinistras e me animei a escrever sobre.
Estruturar o código CSS de uma maneira simples e intuitiva ajuda muito no desenvolvimento. Já vi várias pessoas fazendo códigos mirabolantes e depois perdendo tempo porque havia problemas de conflito no CSS.
Vou falar aqui como eu monto meu CSS ou como pelo menos eu tento montá-lo. Estes hábitos são algumas coisas que me torna produtivo quando preciso executar alguma modificação no layout.
Formatando de fora pra dentro
Muita gente não tem uma regra de onde começa a formatar e de onde termina. Isso ajuda a organizar seu código CSS de uma maneira tão lógica quanto uma estrutura HTML.
Formate seu código começando dos elementos mais amplos para os mais específicos. Comece pela tag HTML (se tiver formatação para ela), depois passe para o BODY, logo após para o div que envolve todo o site (eu costumo chamar de #geral) e assim para os elementos que dividem as seções do site (normalmente: cabecalho, coluna da esquerda, colunas da direita, colunas do meio, rodape etc). Logo após, passe para os elementos que ficam dentro destas divisões e formate-os individualmente.
Veja o seguinte código HTML:
<html><body>
<div id=”geral”>
<div id=”topo”>
<h1><a href=”#”>Logo do Site</a></h1>
<div class=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Produtos</a></li>
<li><a href=”#”>Serviços</a></li>
<li><a href=”#”>Contato</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Código CSS:
html {…}body {…}
/* #topo – Div que contém o LOGO, #menu e a #busca */
div#topo {…}
div#topo h1 {…}
div#topo h1 a {…}
/* #menu – Div do menu principal do site que fica dentro do div #topo */
div#topo div#menu {…}
div#topo div#menu ul {…}
div#topo div#menu ul li {…}
div#topo div#menu ul li a {…}
Tente seguir a estrutura HTML como referência. Mantendo essa organização, fica simples encontrar os elementos no código CSS.
Coloque informação importante nos comentários
Comentar qualquer código é sempre uma boa pedida. Em vez de fazer comentários sucintos e que não dizem nada além do nome do div, faça comentários que contenham informação sobre aquela parte específica do layout.
/* #topo – Div que contém LOGO, #menu e #busca – Elemento Pai é o #geral */
Isso se torna uma referência para profissionais que farão modificações posteriores em seu código.
Caminhos completos em seletores
Sempre use os caminhos inteiros nos seletores. Isso evita erros de conflito no arquivo CSS. Sendo específico você mantém corretamente as heranças dos elementos e consegue ter mais controle sobre seu código.
div#topo div#menu ul li a {…}
Ids e classes, use com moderação
Já vi muita gente fazendo isso:
<html><body>
<div class=”topo”>
<div class=”menu”>
<ul class=”lista”>
<li class=”item”><a class=”linkdoitem” href=”#”>Home</a></li>
<li class=”item”><a class=”linkdoitem” href=”#”>Produtos</a></li>
<li class=”item”><a class=”linkdoitem” href=”#”>Serviços</a></li>
<li class=”item”><a class=”linkdoitem” href=”#”>Contato</a></li>
</ul>
</div>
</div>
</body>
</html>
Essa maneira torna o código HTML muito complicado e seu código fica maior sem necessidade. Quando você coloca classes ou ids nos elementos “pais”, você controla seus “filhos” sem problema algum. Não coloque classes ou ids se você não tiver uma necessidade especifica.
Identifique o Body
Muitas vezes o designer precisa que alguns detalhes diferentes em diferentes páginas do site. Para facilitar sua vida, coloque uma identificação na tag BODY. Assim você pode mudar os detalhes que precisar de cada página individualmente.
<html><body id=”home”>
<div class=”topo”>
<div class=”menu”>
<ul class=”lista”>
<li class=”item”><a class=”linkdoitem” href=”#”>Home</a></li>
<li class=”item”><a class=”linkdoitem” href=”#”>Produtos</a></li>
<li class=”item”><a class=”linkdoitem” href=”#”>Serviços</a></li>
<li class=”item”><a class=”linkdoitem” href=”#”>Contato</a></li>
</ul>
</div>
</div>
</body>
</html>
body#home div#topo {…}
Organize as propriedades
Existem diversas propriedades do CSS e cada uma delas modifica uma característica dos elementos. Há propriedades que formatam o visual do elemento (display, border, background, color, font, text etc…), há outras propriedades que modificam medidas e distâncias (margin, padding, width, height, min-width, min-height etc…) e outras propriedades que posicionam os elementos (float, position).
Eu organizo primeiro propriedades controlam o visual, depois as propriedades de distâncias e medidas e logo após propriedades de posicionamento.
/* #menu – Div do menu principal do site que fica dentro do div #topo */div#topo div#menu ul li a {
font: 11px verdana, arial, tahoma, sans-serif;
color: white;
text-align: right;
border: 1px solid green;
background: orange;
display:block;
margin: 10px 20px 30px 40px;
padding: 0;
width: 300px;
height: 400px;
float:right;
}
A única dificuldade que tenho é de aplicar essas sugestões. A pressa me vence sempre e muitas vezes eu me “esqueço” de aplicar uma dessas sugestões. O código CSS é a base do site inteiro, ele precisa ter uma bela organização, ser legível. Ter controle sobre o arquivo CSS é tudo. Você fica muito mais produtivo. Mas tem que se habituar, se acostumar com essas novas regrinhas.
Link: http://noticias.aspecto.net/index.php/estruturando-o-codigo-css.html Comentario (1)