Ordem de declaração das propriedades CSS
Postado por: Pedro Rogério em
Manter a organização no CSS é fundamental em qualquer projeto, aliás, organização não deve se resumir somente ao CSS. Eu, particularmente em cada projeto declaro as propriedades CSS em ordem alfabética, muitas pessoas me crucificariam por isso, no começo pode parecer estranho, mas depois se torna mecânico e você consegue produzir o CSS normalmente. Mas como eu gosto de colocar aqui também a visão de outros desenvolvedores, vou deixar aqui a dica que encontrei no blog Aloe Studios de como organizar melhor seu CSS.
Todas as declarações devem se resumir na seguinte ordem:
- Display & Fluxo
- Posicionamento
- Dimensões
- Margens, Padding, Bordas, Outline
- Tipografia
- Background
- Opacidade, Cursores…
Traduzindo isso para o CSS, as declarações ficariam da seguinte forma:
elemento {
display: ;
visibility: ;
float: ;
clear: ;
position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;
width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;
margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;
border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;
border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;
border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
outline: ;
list-style: ;
table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;
font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;
background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
opacity: ;
cursor: ;
content: ;
quotes: ;
}
E você, como costuma organizar o seu CSS?
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Não.
Adorei a postagem é uma coisa que sempre procuro fazer, mas procuro seguir mais ou menos como o pessoal da Aloe ajuda bastante principalmente na hora de procurar algum erro
Pedrão como eu aprendi e ainda aprendo com vc o desenvolvimento CSS, utilizo e prefiro fazer tudo em ordem alfabética, realmente se torna mecânico. Eu acho muito mais fácil de encontrar as propriedades assim em OA do que de outra maneira. Talvez pq eu acostumei assim e aprendi assim.
Valew pela dica de uma outra forma de desenvolvimento.
Olá Pedro,
muito interessante a metodologia de declaração, mas você pode exemplificar os itens “Display & Fluxo”?
Abraços!
Tô nessa discussão lá no Aloe Studios. Eu faço igual a você, Pedro. Trabalho, hoje, com propriedades mostradas numa linha, em ordem alfabética. Os caras lá nos comentários quase me mataram por causa disso. Mas, para nós aqui do setor de design, esta maneira de desenvolvimento atende bem.
@Cristiano,
Para fluxo leve em consideração a propriedade “float”.
Também prefiro as propriedades em ordem alfabetica. As vezes se tem uma classe com muitas propriedades, dai o cara tem que ficar procurando se propriedade x foi declarada ou não… da mó trabalhao. Dai se as propriedades estão organizadas por ordem alfabetica não precisa ficar procurando xD
Procurei muito por padrões css e o que eu encontrei na época foi por ordem alfabética, então adotei esse padrão e continuo com ele.
Olha… eu faço tudo inline.. (a menos que tenha MUITA coisa numa unica linha)..
faço basicamente em ordem alfabética… dando destaque a 2 pontos.. posicionamento (position: relative, absolute, etc) em primeiro lugar.. e width, height como ultimos elementos da linha.. o restante… em ordem alfabética!
Eu ordeno em ordem alfabética. Esse modo aí é mais complicado.
Olá pessoal, pra fala a verdade não sigo um padrão para ordenar igual o de vocês, gostaria de saber se isso tem algum problema ou se é apenas para facilitar a manutenção? de qualquer forma vou criar um padrão nos meus ou melhor seguir este de ordem alfabetica para ver se fica melhor, mas gostaria da explicação de é apenas por manutenção?
t+
Showwww…mto obrigado!!! Ajudou mto…:)
@Rafael,
A meu ver não existe problema algum, eu gosto de deixar tudo inline e em ordem alfabética, outros não estão nem aí pra isso, deixam em ordem aleatória. Vai do gosto de cada um.
Não sei se vcs viram os comentários no Aloe Studios, mas parece que os desenvolvedores gringos são os que usam este critério de ordenação. Nós, brasileiros, gostamos da ordem alfabética mesmo.
Ah,eu faço tudo em inline,depois eu linko,de fato deixar em ordem alfabética ajuda ,mas até eu isso começar a ficar “mecânico” pra min,eu jah perdi em produtividade.
Eu faço o seguinte, se tiver background eu chamo primeiro, porque na hora de inserir já vejo as dimensões, depois já coloco o width e o height, sigo para o padding e o margin, após isso border, depois float e por último as propriedades de fonte.
Rapaz Pedro, eu até tenho uma ordem particular, mas ainda não documentei ela direito pra poder comentar sobre. Só sei que pra mim tem funcionado muito bem…
Cara, eu sempre acho bastante interessante as tuas postagens, mas, na minha opinião, você foi infeliz nessa. Diversos autores dizem que a forma com se escreve o css depende de como você o quer. Resumindo, formate-o da maneira que você preferir. Cada desenvolvedor tem sua ordem particular. Por motivos didáticos eu sempre prefiro escrever em ordem alfabética.
Grande abraço
Tchê, pra mim já se tornou mecânico trabalhar com o CSS ordenado alfabeticamente. Nada impede de eu achar uma nova maneira que me agrade mais, mas no momento é o que mais gosto e melhora minha produtividade.
Abraços.
Costumo organizar a declaração de meus css’ quase idêntica a sua. O pensamento, podemos se dizer que é o mesmo até, minha única mudança é as declarações do position que coloco a frente de todas.
Bom tópico, parabéns.
@Silvio,
Pelo contrário, fiz esse post para ouvir a opinião de outros desenvolvedores, eu declaro meu CSS somente em uma linha e em ordem alfabética, mas tem gente que não gosta disso, não se sente á vontade.
É cara, realmente, eu não sei por que entendi errado não. Infeliz foi o meu comentário e não teu poste. Tenho de te pedir desculpas… Acho que tava dormindo ainda quando eu li
.
Parabéns pelo blog…
Eu uso em ordem alfabetica, sempre usei e realmente os brasileiros adotam esta forma (a maioria) ao contratrio dos gringos que usam este criterio (a maioria).
Não que seja mais complicado seguir este criterio, mais e que e mais chato e demora mais.
Vlw.
Eu prefiro declarar de acordo com a ordem do html. Porque sei que se for preciso altera um box inteiro em uma página, vou alterar linhas sequenciais, ficando mais facil a comparação com uma versão anterior do arquivo. Mas gostei da idéia de deixar em ordem alfabetica
[]‘s
Eu procuro agrupar posições, texto e propriedades de texto… e o mais “bonitinho” possivel hehe
ex:
.ex {
color:#fff;
font-family:…;
position:relative;
top:-30px;
background-color:#000;
}
mas achei super interessante a proposta apresentada… vou procurar trazer a minha realidade.
Bacana essa forma, mas eu organizo ela de outra maneira.
Cores, Fontes, Fundo, Tamanho, Fluxo e assim por diante.
Também aposto na ordem alfabética como melhor organização!
Eu costumo organizar com dimensões, margins, paddings, tipografia, background, display, fluxo.
Valeu pelo posto, ajudou mtooo!!!
Bom, no quesito propriedades, eu não sigo um padrão, mas no quesito seletores sim, eu procuro agrupar por páginas, os que são geral, usadoas em várias páginas icam no topo, os de páginas es-específicas, eu mantenho em blocos com comentários no início e fim, pra facilitar a manutenção. E é claro com nomes significativos, nada de #box1, box2…
Particularmente, detesto declarar tudo em uma só linha. Acho péssimo para editar depois.
Eu tento organizar em uma ordem parecida com essa… Mas nem sempre mantenho.
O que eu sempre faço é manter as coisas próximas…
Se vou trabalhar com bordas diferentes, declaro todas uma em cima da outra… Width e Height sempre juntos…
Para não fica algo como
{
width:400px;
border-top:2px solid #FF0000;
margin-left:20px;
font-family:Arial;
margin-top:10px;
height:600px;
border-bottom:2px solid #FF0000;
font-size:12px;
}
Acho que isso é sacanagem. Hehehehehe
Eu vou agrupando tudo na ordem que eu acho necessidade…ex:
Criei uma div, coloquei o tamanho, dpois o float, cor…
#oi {
width: 300px;
float: left;
color: red;
…
}
Vai mais pela demanda…muitos sites, requer bastante agilidade … acredito que tenho que reformular meu css, pois e muito ruim a organização. Masssssssssssss…eu me acho mto bem na minha bagunça! ^^ Abraços
Faltou a ordenação das instruções de list-style-…