Você provavelmente é bem organizado e toma conta direitinho do seu código PHP, Ruby, Python, ASP(?). Arquivos de classes organizados em pastas, todos com nomenclatura extremamente lógica. Seu HTML é impecavelmente semântico, e seu Javascript brilha, de tão bem estruturado. Agora, como anda a saúde das suas folhas de estilo?
CSS é, na maioria dos casos, a ovelha negra das linguagens no que se refere à manutenção. Já aconteceu com você de ter que mudar algum detalhe nos estilos de um site meses depois de ele ter sido concluído e custar um pouco até achar os seletores e propriedades corretas? Ou então, de criar seletores ambíguos, apenas com nomes de classe diferentes, e quando você precisa fazer alterações precisa mexer em mais de um lugar? Você ultimamente tem se perdido em centenas (milhares?) de linhas de código CSS?
Faça um esforço, e traga a organização que você já possui com seus scripts para a sua folha de estilo em cascata. Não é dificíl, pois as orientações você provavelmente já conhece e aplica, quase naturalmente. São algumas das sugestões que eu vi por aí e outras que eu mesmo sugiro a você.
Indentação
Mantenha seu código CSS indentado de acordo com a hierarquia que os seletores representam. No exemplo acima, #topo ul li pertence à #topo ul, e este pertence à #topo – assim como #topo img também pertence à #topo. Repare então que cada bloco de código recebeu uma indentação de acordo com seu nível hierárquico. Indentar seu CSS é importante justamente para visualizar facilmente a estrutura do seu site, sem necessariamente ter que ver o HTML todo novamente.
Ordem alfabética nas propriedades
Alguns de vocês podem julgar esta dica um tanto inútil. Na hora de escrever o código pela primeira vez, colocar as propriedades em ordem alfabética pode ser um pouco chato, cansativo. Mas se você reparar, na hora de fazer manutenção, você quase sempre fica procurando as propriedades no meio da confusão de caracteres. Para mim faz bastante diferença colocá-las nesta ordem, já deixa o código pronto para o futuro.
Agrupamento das propriedades
Os seletores #certo e #errado já dizem tudo. Você pode e deve resumir, por razões óbvias, a declaração das propriedades. Acredite, os dois blocos de código fazem exatamente a mesma coisa.
Na continuação desta série, veremos dicas avançadas para otimizar e estruturar seu CSS. Lembre-se sempre que todo esforço é sempre recompensado, e você é quem ganha quando precisar fazer manutenção e encontrar um código estruturado e intuitivo.
Boa dica, quando comecei a ter dificuldade s em ver meus arquivos de CSS (extensos) comecei a utilizar essas convenções que você mencionou, principalmente a das propriedades em ordem alfabética. Com o tempo fui entendo mais as propriedades margin, padding etc. e economizei muitas linhas de código com o agrupamento.
Outra coisa interessante de se fazer é separar cada seção do site em um arquivo. Isso pode gerar diversos arquivos CSS, mas para determinadas situações você saberá onde procurar, e isso agiliza muito o processo de manutenção. Além de separar as seções, deixar um CSS somente para tags HTML.
Fica aí mais uma dica…
Abaço, parabéns pelo blog.
Boa dica, quando comecei a ter dificuldade s em ver meus arquivos de CSS (extensos) comecei a utilizar essas convenções que você mencionou, principalmente a das propriedades em ordem alfabética. Com o tempo fui entendo mais as propriedades margin, padding etc. e economizei muitas linhas de código com o agrupamento.
Outra coisa interessante de se fazer é separar cada seção do site em um arquivo. Isso pode gerar diversos arquivos CSS, mas para determinadas situações você saberá onde procurar, e isso agiliza muito o processo de manutenção. Além de separar as seções, deixar um CSS somente para tags HTML.
Fica aí mais uma dica…
Abaço, parabéns pelo blog…
@Fernando
Ah cara, você estragou a surpresa! Hehehe
Todas essas questões, de arquivos separados, CSS Reset, formatação dos elementos básicos, comentários, TOC, vou falar de tudo isso no próximo artigo da seqüência.
Obrigado pelo comentário!
Pois é, CSS bem organizado faz uma diferença e tanto… Já disse algumas vezes, mas digo de novo: CSS identado é O MÁXIMO. Navegar em CSS identado é muito mais fácil, e um tanto mais fácil na hora de organizar. Sem dúvida, uma idéia e tanto importada da programação.
Muito bom
A unica coisa que não tenho como seguir, por conta de me adaptar a projetos maiores, é cada propriedade ser em uma linha.
O Bruno Dulcetti comentou uma vez que eles tinham que reduzir ao máximos o tamanho final dos arquvos, por conta das milhões de visitas diárias e a banda usada nos servidores.
E uma coisa que trouxe resultados radicais, foi ao inves de colocar uma propriedade por linha, coloca-las seguidas, pois ocupa menos espaço em branco e fiz isso e realmente, exemplo:
body {
margin:0px;
padding:0px;
text-decoration:none;
}
Fica assim:
body {margin:0px;padding:0px;text-decoration:none;}
Notei que arquivos que pesavam 8kb, agora pesam 4kb.
Para projetos pequenos isso é ridiculo, mas para projetos grandes faz uma boa diferença no bolso
De resto achei show de bola. Vou inclusive adotar colocar as propriedades em ordem alfabetica, já que o agrupamento já uso e o indentar não rola pelo que expliquei acima
Grande abraço e ótimo post mesmo.
Vocês estão estragando as surpresas do próximo post, pessoal =D
auhashasus
Eu concordo com o Rafael Marin, cada propriedade em uma linha. Fica mais fácil de ler.
Pra economizar banda, eu faço um css no meu pc e antes de subi-lo ao servidor, uso o cleancss.com para diminuir o tamanho do arquivo. Ai eu consigo fazer uma manutenção mas fácil e diminuir o tamanho do arquivo.
Gafe corrigida. Escrevi identação ao invés de indentação.
Quem me alertou foi alguém tão arrogante que sequer se identificou.
Comentário apagado e fim de papo. Aqui no blog não há democracia para os arrogantes.