por Diego Eis
Fevereiro 21st, 2007
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.
Se ainda estiver interessado, leia também:
Este post foi criado
na Quarta-feira, Fevereiro 21st, 2007 às 22:27 e está arquivado em Artigos, Tecnologia e Tendências.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
muito boa a elucidação à organização da estrutura. muita gente pena com isso, ao final do projeto, por não ter seguido uma estrutura lógica e de fácil acesso, logo no início.
eu costumo fazer exatamente como tu fazes. porém, na hora de declarar as propriedades no CSS eu coloco tudo em ordem alfabética. acho mais organizado assim.
mas isso somente dentro dos elementos. estes, em si, eu faço na sequencia em que vão sendo necessários, na ordem de cima pra baixo, esquerda pra direita.
vê se vai mais a fundo com esse tema. é bastante interessante. isso vai dar algumas madrugadas de bons sonhos pra quem ainda não está conseguindo conceber uma estrutura de organização. haha!
abração,
Pablo Dias
Boas dicas.
Um código bem escrito não é somente aquele que funciona bem na prática, mas aquele que está bem claro e explicado, para facilitar sua manutenção.
E se estiver trabalhando em equipe então… Muita gente já veio me agradecer por fazer tudo comentado, tanto no XHTML como no CSS.
É isso aí 
Boas dicas Diego, eu já uso a maioria delas, mas se não me engano peguei esse hábito quando aprendi pelos (video)tutoriais aqui do tableless.
Sem dúvidas ajuda muito, evitando conflitos no código e facilitando as possíveis edições posteriores do CSS.
Eu costumava usar o caminho completo no css, mas isso estava deixando o arquivo mais pesado que o necessário.
A dica de seguir a mesma estrutura do html no css é bacana. As vezes eu também utilizo o mesmo indent para evidenciar a estrutura.
Estou tentando criar uma regra minha para modularizar o css. Vi um post sobre isso, mas não gostei da estrutura proposta.
Você utiliza algum tipo de modularização?
tá aê Diego… mais um assunto pro teu livro q já tá quase virando lenda//hehhe
faz quase um ano hein!!!
ps.: os posts q explicam códigos e técnicas são os melhores. Qnd possível, post + q o pessoal agradece =)
[…] um artigo no Tableless de como estruturar o css e um dos links nas referências me levou a uma página com um javascript […]
Grande Diego eis mestre no que se diz ao html.
vou usar com certeza muito o que você passou hoje aqui e ate estou criando um site linux seguindo o que disse.
Apenas uma correção, onde esta:
“div#menu” troca por “div.menu” já que você usou no xhtml “class” em vez de “id”
Abraço
Pois é, muito boa a dica, isso ajudar muita gente a se organizar melhor, com certeza
Olá Diego, boa tarde,
Gostei muito do post
Parabéns
Agora vejo uma luz ao fundo do tunel que não via antes.
Obrigado pela explicação
Um abraço
César Oliveira
http://www.profissionalweb.net/blog/
A tempos não via um post tão bom assim no Tableless.
Estou sentindo falta de posts mais didáticos e menos informativos…
Mesmo assim, ainda continua fazendo um grande trabalho…
Abraço
Realmente organizar o código css é muito útil.
Geralmente eu não costumo organizar-lo pelo mais abrangente primeiro. Eu procuro começar com o que aparece primeiro no codigo (X)HTML. Ex: [html], [body], [div id=”topo”], [div id=”container”], [div id=”rodape”], nessa ordem. E também procuro comentar sempre que uso algum artificio mais complicado como /*Deixa o menu posicionado acima com margem tal cor tal*/. Não sei se isso é bom para o código, mas me ajuda muito porque sempre esqueço para que servem as regras que apliquei. Principalmente depois de passar muito tempo sem mexer naquele código.
Ótimo post
Abraço
Boa dica. Montando o código organizado e comentado é na primeira manutenção que a gente percebe o considerável ganho de tempo.
No meu caso, eu procuro organizar de forma diferente: propriedades de posicionamento, distâncias e medidas, depois o visual. Se bem que o importante é organizar de alguma maneira.
[]’s
Muito bom o tutorial! Extremamente útil e elucidativo para os novatos.
OFF: Por que há duas meta tags meta http-equiv na página do site tableless.com.br?
Sucesso!
Não querendo ser xato mais já sendo… tu mandou mto bem nessa matériaaaa rss….
Eu como novato nessa área mais estou me aprofundando cada dia mais, fazer a organização do código é uma coisa bem legal e diferente porque vc pode ver pelos comentário cada um segue um caminho diferente.
eu tenho um bloco de notas onde anoto tudo, fora os comentários pequenos de lembretes no codigo, cada passo vou anotando cada modificação e ordem que dou no código para a proxima fazer igual e muito mais rápido sem perder tempo analisando dimais.
é mto interessante, 
agora vendo as videoaulas vc tb pega umas manhas iguais hauahuhauh rs diego passador de manhas kkk
boa matéria.
Muito bom Diego. Faz um bom tempo que eu queria ler algo sobre esse assunto aqui no Tableless.
O grande vilão dessa maneira bem organizada e estruturada de desenvolvimento é o fato de que na correria cotidiana dos desenvolvedores a “pressão” que sofremos com prazos e tudo mais faz com que deixemos um pouco de lado essa excelente prática de desenvolvimento.
Mas ainda acredito que conseguirei atingir um equilíbrio entre cumprir prazos e desenvolver organizadamente.
Grande abraço!
Eu só melhoraria o link pro “How to structure large css files”.
Este link tá feio ;P
Eu também sigo a ordem que aparece no fonte e procuro deixar todos os comandos na mesma linha…acho mais fácil e o documento fica menos extenso:
/***********************
/* TOPO
/***********************
div#Topo {}
div#Topo a {}
div#Topo h1 {}
/***********************
/* MENU LATERAL DIREITO
/***********************
…
[]´s
essa dica é muito boa mesmo..
eu costumo fazer assim também e separar por comentários quando uma coisa é distinta da outra..
com certeza isso também não é só usado em css mas em qualquer coisa que iremos fazer..
Olá, meus parabéns pelas dicas e muito obrigado a todos que fazem o Tableless.com.br foi a partir daqui e do site do Maujor que aprendi CSS o que me deu um status junto aos web da minha geração… hehehe… Só uma coisa, quem já utilizou a propriedade azimuth… se puderem me falar como funciona eu agradeço… sei que o tópico não trata sobre isso mas é que eu pensei nisso agora, sabe como é, pensamento hiperlink!
cara, nesse sentido eu sou MUITO NEURÓTICO. Organizo tudo em ordem alfabética. Sempre! As vezes perco muito tempo, mas é neurose! ^^
Interessantes dicas.
Eu já usava algumas.
Outras como a identação do body são novidades pra mim e serão muito úteis.
[…] Tableless.com.br - Web Standards com Arroz e Feijão por Diego Eis (Tableless.com.br) Este era um assunto que eu queria falar aqui a muito […]
Ótimo artigo Diego, irá me ajudar muito.
Como estou começando na área, é sempre bom começar pelo lado certo!
Esse tipo de estruturação do código me ajudará muito em posteriores atualizações de futuros sites.
Vlw
otimo post meus parabens 
;P
![:-\](http://www.tableless.com.br/smilies/yahoo_question.gif ":-\"){kind=small}
“