Criação de classes CSS

Front-end

04/01/2015

Definir classes em CSS, alguem conhece algum padrão se é que existe. obrigado.
Franzé Peixoto

Franzé Peixoto

Curtidas 0

Respostas

Soeuseijothaz

Soeuseijothaz

04/01/2015

Definir classes em CSS, alguem conhece algum padrão se é que existe. obrigado.


Eu desconheço um padrão, agora pode-se seguir algumas praticas:

1-Nome claros sobre o objetivo da classe

2-Economizar espaços pois como tempo o arquivo vai crescendo e poe afetar a performance no carregamento da página:
Ao invés disto:
padding-top: 1px;
padding-right:2px;
padding-left: 3px;
padding-bottom: 4px;

Use isto:
padding: 1px 2px 3px 4px;


3-Evite criar mais de uma classe com o mesmo objetivo.

4-Existe uma controversia sobre criar um arquivo .css e colocar tudo lá ou criar arquivos separados de acordo com a funcionalidade: zerogrid.css, responsive.css, responsiveslides.css, bootstrap.min.css e etc. Alguns afirmam que afeta a performance. Eu gosto de separa para facilitar a manutenção e como os arquivos ficam pequenos acho que não afeta a performance tanto assim. Agora é bom sempre esta atento a estes detalhes.
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

04/01/2015

Ele reconhece a sequencia?





padding-top: 1px;
padding-right:2px;
padding-left: 3px;
padding-bottom: 4px;


Use isto:


padding: 1px 2px 3px 4px;


GOSTEI 0
Soeuseijothaz

Soeuseijothaz

04/01/2015

Sim! Você abrevia declaração. Parece preciosismo, mas em projetos grandes faz a diferença, pois diminui o tamanho do arquivo final. E como ressaltei isto afeta a performance.

No exemplo do "padding" ele traduz para: top, left, bottom e right.

Outros exemplos:

    margin: 2px 3px 5px 9px;
    font: bold 12px/14px Arial, Verdana, sans-serif;
    border: 1px solid #000;
    background: #FFF url(images/background.gif) 0 15px no-repeat;
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

04/01/2015

Entendi, mas ele segue essa sequencia ou só funciona com as 4?
GOSTEI 0
Soeuseijothaz

Soeuseijothaz

04/01/2015

Entendi, mas ele segue essa sequencia ou só funciona com as 4?


Se você quiser omitir algum use zero:

padding: 10px 0px 15px  0px;


Se o projeto for pequeno e e o css não contenha muitas classes nem é preciso preocupar-se com isto.

Sugiro que se acostume com este tipo de declaração pois geralmente é a utilizada. E quando você encontrá-la não ficará perdido.
E é considerada como "melhores prática".
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

04/01/2015

hahaha, tava meio que obvio, kkkkkk
Obrigado, totalmente esclarecido.
GOSTEI 0
POSTAR