ORDEM DE DECLARAÇÃO DAS PROPRIEDADES EM CSS
Postado em: 9 de outubro de 2007 por Pedro RogérioAté hoje não vi uma referência concreta sobre ordem de declaração de propriedades em css, mas toda regra de boas maneiras hoje em dia é válida, e dessa vez achei uma referência interessante que estarei compartilhando aqui com vocês, onde se supõe que a melhor forma de declarar as proriedades seria assim:
Comportamento
- display
- overflow
- clear
Posicionamento
- position
- float
- top, right, bottom, left
Tamanho
- width
- height
Margens e bordas
- margin
- padding
- border
Texto
- font
- text
- line-height
Fundos e Cores
- background
- color
Se você tem alguma outra ordem que gosta de seguir, mostre aí nos comentários.
Marcus Silva disse: 09.10.07 ás 11:27
Acabei de ler essa referencia!
È verdade que o Santo Graal (é assim que escreve?) da organização do CSS não apareceu ainda, mais eu faço da forma mais simples, em arquivos; separados
separo um para as cores, outro para os estilos em geral e outro, se necessario para a tipografia. Essa forma que eu faço pode ser até polemica mais eu vi em um site um dia que gostei, passei a fazer assim e consigo me manter organizado; mais sabe como é..vai de cada um.
Abraços…
VitorGGA disse: 09.10.07 ás 14:46
O ruim de fazeh isso eh q no final das coisas já pensou, 4 arquivos css só pra montar o design dum site, ficar repetindo tags só para dividir isso tudo, melhor fazer mesmo tudo num só, e se possível seguir essa ordem ae huuh
Gustavo Ribeiro disse: 09.10.07 ás 15:21
Também faço a organização de meu CSS conforme a sua postagem, mudando apenas algumas coisas, como a declaração do border e background (que deixo sempre para o final).
Em questão de arquivos .css, costumo fazer um com propriedades que englobam todo o site e vou dividindo o restante por módulos, formulario etc
abs
Daniel Accorsi disse: 09.10.07 ás 17:12
Legal seu post. Gosto de informações relacionadas a organização.
Cristian Trentin disse: 09.10.07 ás 17:34
Era isso que eu precisava….
Klaus Paiva disse: 09.10.07 ás 20:51
Eu costumo fazer as declarações em ordem alfabética, exemplo:
http://blog.klaus.pro.br/stylesheets/blog.css
Um artigo que comenta sobre isso.
http://www.smileycat.com/miaow/archives/000153.php
A primeira vista pode parecer estranho e pouco produtivo mas, depois de pouco tempo você já consegue fazer a organização sem parar para pensar.
Muito útil para manutenções futuras também.
Daniel Accorsi disse: 09.10.07 ás 21:26
Então Klaus, além de fazer por ordem alfabética, que tal antes mesmo agrupar por área do site? topo, menu, rodapé, etc. É uma boa!
Valeu.
Izac disse: 10.10.07 ás 01:03
Antes eu nem ligava pra isso, de um tempo pra cá venho fazendo em ordem alfabética. Mas, acho que isso não influencia no funcionamento do site em geral.
Apenas, penso que fica mais fácil de se localizar no código.
Quanto a organização de arquivos isso depende.
Exemplo: Para um site normal, costumo separar 1 css para cada página. Ou seja, crio um principal que contém todas as informações generais e 1 css para cada página. Depois quando chamo o css para a página selecionada dou um ‘import url’ dentro do css mesmo ao invés de criar vários ‘link rel’ no ‘head’ da pagina.
Ou então: Quando é algo mais complexo, como um sistema ou portal por exemplo, procuro fazer igual a cima daí também crio arquivos css para determinados objetos, ações etc, exemplo, formularios.css, ou entao, menu.css, menu2.css essas coisas ….
Klaus Paiva disse: 15.10.07 ás 20:46
@Daniel,
isso também é uma prática muito boa! Costumo adotar também e a organização dos arquivos fica bem melhor desta forma.
Valeu pelo adendo.
[]’s
Carlos Eduardo disse: 16.10.07 ás 11:36
Interessante ver um post sobre o assunto.
Muita gente utiliza ordem alfabética pra organizar cada regra no CSS, mas eu utilizo uma ordem parecida com a que você colocou no artigo. A única diferença é que troco de posição os dois últimos, colocando fundo e cores antes das fontes, já que fontes são elementos que nem sempre são trocados, por isso ficam por último em meus CSS.
Ronildo Costa disse: 17.10.07 ás 17:59
Eu normalmente coloco em ordem alfabética.
E deixo o espaçamento padrão dos dois pontos.
Anderson disse: 01.11.07 ás 09:32
Olá, parabéns pelo Blog e pelas dicas.
Eu costumo usar somente um arquivo css para os sites que desenvolvo. Geralmente este arquivo tem o mesmo nome do site (ex: site.css). Neste arquivo, a forma que encontrei para me organizar foi a de comentar cada bloco de informação, de acordo com o site. Assim tenho um arquivo, fácil de encontrar, e com as seções do site divididas com os comentários.
Stalker disse: 29.05.08 ás 00:37
Eu ordeno por ordem alfabética. Isso foi uma recomendação que li no site do maujor.
Abraços.