Estruturando o código CSS

February 27, 2007 at 2:11 pm
Sob: Uncategorized
Tags:

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.

Comentario (1)

Onze dicas para trabalhar com CSS (Cascading Style Sheets)

February 6, 2007 at 3:24 pm
Sob: Uncategorized
Tags:

Por Erika Sarti, em 22/01/2007.

–

Introdução

Não importa se você é um iniciante na área ou já desenvolveu vários sites: a essa altura, você já está cansado de saber que as folhas de estilo externas são obrigatórias em qualquer projeto. Porém algumas dicas simples são sempre úteis para facilitar nosso trabalho. Veja 11 delas a seguir:

1 – div1 é diferente de menu

Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam nada e na hora da manutenção vão tornar seu trabalho mais lento. Da mesma maneira, barra_azul não faz muito sentido: e se você mudar a cor do site? Prefira nomes explicativos, como menu ou barra_links.

2 – Maiúsculas e minúsculas

Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu elemento no HTML.

3 – id x class

Para elementos que aparecem apenas uma vez no layout (menu, rodapé, cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (como #menu). Para elementos que vão aparecer várias vezes, utilize a declaração class, precedida por um ponto (como .noticia).

4 – Compartilhe declarações entre vários elementos comuns

Se vários elementos terão características em comum, declare-os todos de uma vez, separados por vírgula:

h1, h2, h3, h4 { font-family: Arial, Helvetica, Sans-Serif; }

5 – Lembre-se da hierarquia e organize-se

Por ser uma folha de estilo em cascata, a última declaração é a que prevalece. Preste atenção para não declarar um elemento duas vezes: na hora da manutenção, você pode fazer a alteração na primeira e se perguntar porque ela não funciona, quando na verdade uma segunda declaração está perdida no meio do seu código (por isso organização é fundamental!).

6 – Comente os códigos avançados

Quando você utilizar o CSS para efeitos mais avançados, como um menu em abas, comente seu código para não esquecer o que cada parte dele faz:

#menu ul li a /* aba normal */ { background: #444; color: #FFF; border: 1px #FFF solid; }
#menu ul li
a:hover { background: #FFF; color: #F00; border: #F00 1px solid; }

7 – Anote suas cores

#09F ou #F09, qual é o rosa e qual é o azul? Mesmo se você conseguir fazer cálculos RGB de cabeça pra saber a tonalidade da cor sem uma tabela de cores hexadecimal, econonize tempo anotando a cor correspondente de cada código no seu arquivo:

/* ************************************ */
/*                                      */
/*       Cores usadas no layout         */
/*                                      */
/*      cinza fundos:   #F5F5F5;        */
/*      cinza bordas:   #B6B6B6;        */
/*      azul link:      #336699;        */
/*      azul lnk ativo: #003366;        */
/*                                      */
/* ************************************ */

8 – Declare as unidades

Quando trabalhar com valores diferentes de zero, declare as unidades (px, pt, etc). Cada navegador assume uma unidade padrão quando ela não é especificada, gerando resultados diferentes em cada navegador.

9 – Tenha certeza que o efeito desejado funciona em todos os navegadores

Barras de rolagem coloridas, divs semi-transparentes… Tudo isso é muito bonitinho, mas não funciona em todos os navegadores. Projete seu site de uma maneira atraente sem esses recursos, e, de novo, certifique-se de que seu CSS tem o mesmo efeito no maior número de navegadores possível.

10 – Não confie na sua memória

Com o tempo, é natural que decoremos os principais elementos e seus atributos. Mesmo assim, tenha sempre um guia de consulta rápida ao seu alcance, para tirar dúvidas sobre o funcionamento deles. Um ótimo livro que eu uso e recomendo é o CSS – Cascading Style Sheets – Guia de Consulta Rápida, de Luis Gustavo Amaral.

11 – Inspire-se

Sites como o css Zen Garden e o Maujour são ótimos para ter uma idéia das novas tendências. Visitar esses e outros endereços regularmente é recomendável.

Fonte: http://www.infowester.com/dicascss.php

Erika Sarti é web designer e trabalha como free-lancer desde 2000. É a responsável pelo novo layout do InfoWester, basicamente feito com tableless, um de seus assuntos preferidos. Seu portfólio está em www.erikasarti.net.

–

Uma ótima referência de CSS aqui: http://tiger.la.asu.edu/Quick_Ref/css_cheat_sheet.pdf. Referência rápida que cabe em uma folha de papel, impressa dos dois lados. Excelente como guia rápido no trabalho.

Comentario (1)