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.
28 Comentários
pablo dias 21/02/2007 às 23:08
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
Carlos Eduardo 21/02/2007 às 23:12
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í
Tarcísio Sassara 22/02/2007 às 00:31
Sou adepto: http://www.tableless.com.br/css-modular-breve-explicacao
Boa dica!
Emanuel Felipe 22/02/2007 às 01:21
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.
Rafael Dourado 22/02/2007 às 01:44
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?
tigo 22/02/2007 às 02:02
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 =)
Netlus » Blog Archive » Gerador de CSS 22/02/2007 às 03:42
[...] 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 [...]
THiago Prado 22/02/2007 às 11:29
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
João Henrique Firmino 22/02/2007 às 11:31
Pois é, muito boa a dica, isso ajudar muita gente a se organizar melhor, com certeza
César Oliveira 22/02/2007 às 14:01
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/
Jader Rubini 22/02/2007 às 14:10
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
Samuel Moraes 22/02/2007 às 16:22
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
Anderson Sá 22/02/2007 às 17:18
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
Denis 22/02/2007 às 19:18
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!
Edu Vilela 23/02/2007 às 06:21
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.
André Valongueiro 23/02/2007 às 10:07
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!
Lucas Castro 23/02/2007 às 11:32
Eu só melhoraria o link pro “How to structure large css files”.
Este link tá feio ;P
Ricardo Momm 23/02/2007 às 11:41
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
felipe tonello 23/02/2007 às 11:43
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..
Felipe Caparelli 24/02/2007 às 01:05
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!
camilo 26/02/2007 às 14:53
cara, nesse sentido eu sou MUITO NEURÓTICO. Organizo tudo em ordem alfabética. Sempre! As vezes perco muito tempo, mas é neurose! ^^
Micox 26/02/2007 às 15:44
Interessantes dicas.
Eu já usava algumas.
Outras como a identação do body são novidades pra mim e serão muito úteis.
ASPECTO.Net - Notícias » Blog Archive » Estruturando o código CSS 27/02/2007 às 16:11
[...] 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 [...]
José Carlos 28/02/2007 às 16:43
parece com esse post …
http://friendlybit.com/css/how-to-structure-large-css-files/
:-\”
Raul Souza Lima 18/10/2007 às 14:56
Ó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
Geraldinho 07/02/2008 às 14:46
otimo post meus parabens
;P:(
Guilherme 14/12/2009 às 13:50
Ótimo artigo!! Parabéns!
Gabriel Lau 27/02/2010 às 22:10
Daew Diego,
gostei das dicas que tu deu pra galera. Eu já cotumava usar coisa parecida mas é sempre bom reforçar.
Mas eu gostaria de saber em relação a organização de MUITOS arquivos CSS externos dentro de um só. Estou lendo alguns artigos sobre otimização de sites e este é um assunto bem abordado.
“REDUZIR o número de arquivos.”