Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 27/03/07

Dicas para melhorar seu CSS: Parte 1

Após certo tempo de aprendizado, conhecendo novas técnicas e, claro, experięncia adquirida em trabalhos de pequeno e grande porte, podemos perceber diferenças entre um [tag]CSS[/tag] bem feito, formatado e prático para manutenção, comparando-o com um CSS feito sem tanta experięncia e, até mesmo, sem aquela malandragem na escrita.

Um exemplo de CSS simples, que não foi planejado para atender as necessidades de qualquer tipo de trabalho, em sua manutenção principalmente:

  
    #menu {
    	float: left;
    	width: 120px;
    	background: #cacaca;
    	margin-left: 10px;
    	margin-bottom: 20px;
    }

    p {
    	margin-bottom: 5px;
    	text-indent: 10px;
    }

    a {
    	text-decoration: none;
    }

    #header {
    	background-image: url(../imagens/header.jpg);
    	background-repeat: no-repeat;
    	background-color: #000;
    }
  

Este é um pequeno exemplo que já pode ilustrar muita coisa. Vou listar algumas ingenuidades do código acima, para elucidar o que pode ser feito para deixar o código menor, mais limpo e prático para manutenção.

Abreviação

Podemos pegar o último item do exemplo acima, para entendermos melhor a questão da abreviação no CSS.

  
    #header {
    	background-image: url(../imagens/header.jpg);
    	background-repeat: no-repeat;
    	background-color: #000;
    }
  

Ao invés de escrevermos desta maneira, poderíamos escrever tudo em uma linha só. Isso não é uma coisa óbvia, portanto tem que ser aprendido através de leitura e bastante prática, com certeza.

Abreviando, esta regra poderia ser re-escrita da forma abaixo:

  
    #header {
    	background: url(../imagens/header.jpg) #000 no-repeat;
    }
  

Simples, não? Assim podemos proceder em diversos casos, tanto em background, como margin, padding, font, e outras propriedades no CSS.

Formatação

Essa é mais uma questão pessoal do que realmente um padrão para escrita do código. Como se pode observar nos códigos acima, cada regra CSS foi escrita em várias linhas, reservando cada linha para uma propriedade, ficando mais fácil de ler. Porém, há uma outra maneira de escrever (a qual utilizo há um bom tempo), que é utilizar uma linha para cada regra inteira, mantendo todas as propriedades juntas, por exemplo:

  
    #menu { float: left; width: 120px; margin: 0 0 20px 10px; background: #cacaca; }
  

No exemplo acima, apliquei a prática da abreviação do código, juntando as medidas de margin, além de manter a regra inteira em apenas uma linha. No começo é um pouco complicado, mas essa prática diminui muito o tamanho do arquivo e facilita a busca de determinada parte de seu código, mostrando mais regras de uma vez só em sua tela.

Aqui termina a primeira parte da série de posts sobre as melhorias que podemos fazer em nosso CSS. Algumas são utilizadas por preferęncia pessoal, mas outras realmente fazem diferença tanto para produção como a manutenção de qualquer projeto, seja de pequeno, médio ou grande porte.

Assuntos: CSS, Web Standards
Trackback Feed deste artigo

10 comentários para "Dicas para melhorar seu CSS: Parte 1"

  1. Yalli Oliveira | 27/03/07 - 11:04 am

    legal… acho que seus artigos sobre css irão ajudar muito o pessoal que está iniciando o aprendizado, e também para aqueles que já iniciaram mais ainda não produzem um código limpo e não redundante. Eu particurlamente não gosto de usar as propriedades todas em uma mesma linha. Sempre pulo uma linha a cada propriedade inserida…

    Valeu cara… abraço!

    Topo
  2. Jader Rubini | 27/03/07 - 11:17 am

    Belas dicas, com exceção da última.
    Não sou muito a favor de condensar as declaraçőes todas em uma única linha, por questőes principalmente de legibilidade.

    Topo
  3. Carlos Eduardo de Souza | 27/03/07 - 11:47 am

    Justamente por ver que muitas pessoas ainda utilizam a escrita de regras no CSS em várias linhas, coloquei aquela “dica” como algo pessoal.
    Como eu disse, acho que é só uma questão de prática, pois a gente acaba se acostumando e não se perde mais.

    Além disso, cada regra em sua linha, na minha opinião, deixa mais fácil de encontrar o que desejo.

    Para facilitar ainda mais isso, sempre escrevo as propriedades em uma ordem pré-determinada, ou seja, se utilizar float vai por primeiro, display também, depois vem as medidas de largura e altura, depois margin, padding, background, bordas, estilização de fonte, etc.

    Desta forma eu mantenho, sempre, a mesma linha de raciocínio em cada linha, sendo impossível me perder :)

    Topo
  4. André | 27/03/07 - 4:12 pm

    Olá Carlos!
    Primeiramente parabéns pelo redesenho do site, ficou bom o contraste das cores sem se falar que deixou a leitura mais agradável. Enfim..

    Sobre a maneira de escrever o código CSS, existem várias maneiras. Antigamente escrevia como vocę (todas as propriedades numa única linha) e com o passar do tempo senti dificuldade na hora de editar.
    De qualquer maneira volto a dizer que isso é uma questão pessoal. Veja uma maneira limpa de escrever:

    Vou pegar o exemplo do tópico mesmo.

    #menu {

    float: left;

    width: 120px;

    background: #cacaca;

    margin-left: 10px;

    margin-bottom: 20px;

    }

    #menu p {

    margin-bottom: 5px;

    text-indent: 10px;

    }

    #menu p a {

    text-decoration: none;

    }

    #header {

    background-image: url(../imagens/header.jpg);

    background-repeat: no-repeat;

    background-color: #000;

    }

    Percebe a liberdade que vocę tem quando as propriedades ficam espaçadas. Imagine vocę que abre no mínimo 5 ou 6 folhas de CSS por dia para editar. Não dá vontade de arrancar os cabelos todo o código polúido?
    O método que coloquei acima é semelhante em escrever XHTML. Uma tag dentro da outra.

    Uma outra dica, embora muitos já tenha ouvido falar é utilizar comentários. Ajuda muito.

    É isso aí pessoal, coloquei esse exemplo só para dar um voto de confiança pra quem gosta de escrever CSS ŕ moda antiga. hehe

    Abraço ŕ todos!

    Topo
  5. JulioGreff | 27/03/07 - 8:59 pm

    Boa dica. Já vi algo parecido em alguns lugares por aí.
    Já desenvolvi de muitos jeitos, sofri muito, e aprendi muito com dicas como essa.
    A que considero mais importante, em relação a produtividade: colocar tudo numa linha só, fica muito mais fácil de ler, editar, manter…

    Topo
  6. Chan | 29/03/07 - 9:55 am

    Bem não gosto de escrever uma regra em uma única linha, mas como dito é uma opinião pessoal.
    Até mais…..

    Topo
  7. Fill | 3/04/07 - 10:36 am

    Depois que li um artigo sobre escrever tudo em uma linha só, no Revolução se não me engano, passei a fazer isto frequentemente, é mais facil de editar e a folha de estilo fica menor, diminuindo a banda ocupada pelo servidor ;)
    Este tipo de dica é muito importante para o pessoal que esta começando.

    Topo
  8. Linke | 3/04/07 - 5:33 pm

    gosto mais do jeito “inline” de fazer css! =) uma coisa que tenho feito também ultimamente que achei bom foi fazer um certa “hierarquia” nas linhas..:

    ul#menu { margin-left: 15px; }
    ul#menu li { color: #fff; }
    ul#menu a { color: blue; }

    Acho que fica melhor também!
    Mas enfim, é realmente questão de gosto e costume né!

    Boas dicas!

    Topo
  9. Linke | 3/04/07 - 5:35 pm

    opa…não apareceu ali no meu comentário… mas a idéia e dar um espaço na frente das linhas …. assim como fazemos no html, só para agrupar certinho. =)

    Topo
  10. aretadobem.com.br | 8/04/07 - 11:48 am

    “Especialistas” x “Autodidatas da web”…

    Ausente por uns meses, agora resolvi voltar, com o advento da faculdade em minha vida, vi o quanto é importante disseminar informação, ainda mais quando vivencio que nem sempre quem tem “especialização” é realmente “especialista……

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons