Feed

18 junho 2008

CSS: Regras (que eu uso) na Organização do Código


imagem

Organizar códigos é muito importante, principalmente quando trabalha-se em equipe. A organização dos códigos fontes de um projeto ajudará na eficiência do trabalho, pois ficará mais fácil fazer a manutenção do mesmo e procurar por alguma linha específica.


Vou mostrar algumas regrinhas que se aplicam aos códigos CSS para uma boa organização.

Ordene e agrupe por seletores


É conveniente separar o código por seletores, preferencialmente hierarquizados, já que o navegador lê o CSS de cima para baixo, assim, você mudará pequenas diferenças (cor, tamanho da fonte etc) de um seletor para outro.


A ordem que eu uso é: *, html, body, a:(link, hover, active, focus, visited), p, h(1, 2, 3, 4, 5, 6), table, tr, th, td, fieldset, legend, address, ul, li, ol, dl, form, input, select, label, textarea, div, img, span, #nomeId, .nomeClasse.


Esses são os seletores que eu mais uso nos projetos. No .css ficaria assim:


ul, li, .msg {}
ul {}
li {}
.msg {}

Mesmas propriedades para vários seletores


Acho que um dos maiores problemas dos CSS's é o fato de ter repetida as mesmas propriedades para vários seletores. Isso prejudica o código em sua estrutura e principalmente no seu tamanho, tanto visual quanto virtual. Veja o exemplo abaixo:


h1, h2, h3 {
font-weight:100;
}

a strong {
font-weight:100 !important;
}

strong {
font-style:italic;
font-weight:100;
}

#nav {
font-style:italic;
}

.msg {
font-style:italic;
}

/*Esse código pode ficar assim:*/
h1, h2, h3, strong {
font-weight:100;
}

a strong {
font-weight:100 !important;
}

strong, #nav, .msg {
font-style:italic;
}

Dica: Leia Dica de otimização de CSS I para ver uma técnica de aninhar as propriedades do CSS.


Declarações em ordem alfabética


Ordenar as propriedades em ordem alfabética ué. Entendeu não?


#container {
border:1px dashed;
color:#000;
margin:auto;
padding:1em 0;
width:700px;
}

Separar as cores


Separar as cores de bordas, backgrounds, textos etc. Se você precisar usar o mesmo CSS para outro projeto de cores diferentes não será necessário editar linha por linha.


body {
border-left:2px solid #040770;
border-top:2px solid #040770;
}

td {
background:#040770 url(../img/linkOn.gif) no-repeat right;
border:1px dashed #040770;
}

a:hover {
background-color:#040770;
padding-right:15px;
}

/*Com a separação do código fica assim:*/


body {
border-left:2px solid;
border-top:2px solid;
}

td {
background:url(../img/linkOn.gif) no-repeat right;
border:1px dashed;
}

a:hover {
padding-right:15px;
}

/*CORES*/
body, td {
color:#040770;
}

td, a:hover {
background-color:#040770;
}

Nomeie os blocos do CSS e separe-os com espaços duplos


Separe-os por blocos titulados, como no último exemplo. Fica mais fácil de entender.


/*LINKS*/
a:hover, a:active {
background:url(../img/linkOff.gif) no-repeat right;
color:#666;
cursor:pointer;
}


/*TEXTOS*/
p {
margin:15px 0;
}

p .msg {
margin:15px 6px;
}

p .ins {
list-style:none;
text-align:justify;
width:419px;
}


/*TITULOS*/
h1, h2, h3 {
margin-top:10px;
padding:0 0 3px 5px;
width:75%;
}

Últimas regras:


Tente não usar hacks (apesar dos IEk's não deixarem);

Use um CSS "global.css" para colocar as propriedades padrões e importar outros arquivos .css;

Se for um projeto maior, separe os arquivos .css para form's e seus filhos como input, label, textarea, .btn etc. Essa dica pode ser usada para outras situações como tabelas ou fieldsets;

Importe apenas o arquivo global.css no HTML;

Idente o código. A imagem do post é um ótimo exemplo;

Tente validar o seu código.



Depois desse artigo não devo continuar a série de otimização, acho que coloquei todas as que eu uso aqui. Mas se eu aprender alguma coisa nova, divulgo no blog.




;)

5 comentários:

  1. também tenho mania extrema de organização/identação de códigos (css, html, php, sql, tudo)... não que seja ruim. acho q é minha "melhor mania"

    gostei daquilo de usar tabulação pra identar quando for tipo o mesmo seletor, nunca pensei isso.

    tá no meu "g. reader" agora!..

    ResponderExcluir
  2. Cleo, como não achei seu blog antes ?!
    Adorei seu blog, tenha certeza que está sendo muito útil sua ajuda.

    ResponderExcluir
  3. isso vai ajudar na construção do meu programa na empresa,
    mtoo obrigadu moça

    ResponderExcluir
  4. pô cleo,valeu mesmo, adorei pra caramba da maneira que vc usa pra organizar os seus códigos,e tenha centeza que estarei adotando os seus metodos também. parabéns por seu trabalho fantastico. abraços
    anderson cardoso

    email orkut: coollw_02@hotmail.com

    ResponderExcluir
  5. Muito obrigada @Anderson Cardoso. Tem tempo que não paro pra programar, ja tenho outras tecnicas que ajudam tb. Mas essas ain ainda continuam sendo a minha base.
    Bjs.

    ResponderExcluir