Ordenação de propriedades no CSS

[eduardojmatos]

Sim, vai ser polêmica essa issue, mas a ideia é saber como vocês normalmente organizam as propriedades de CSS.

Estamos discutindo isso aqui na @getninjas e cada um tem uma opinião diferente. Existem duas formas de organização que estamos cogitando aqui:

Alfabética

PROS

• A ideia é ser mais fácil de achar uma propriedade;
• É no-brainer, não precisa pensar muito antes de colocar as properties;

CONTRAS

• propriedades misturadas e longe do contexto das próximas;

Por Tipo

PROS

• Faz pensar mais na UI, já que as definições de cada módulo de CSS fica próxima;

CONTRAS

• fica difícil de codar sem um SassLint;
• precisa entender dos módulos de CSS (?);

O CSS Tricks fez uma enquete sobre isso em 2012, vejam o resultado:

https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/

---

E vocês? Como fazem por aí?

[andrewsfg]

@eduardojmatos Eu sempre preferi por ordem alfabética, porque nela os debates são menores e é mais didático que todas outras, mas já vi várias abordagens por tipo também. Quando trabalhava na Folha de S.Paulo, adotamos o padrão alfabético e funcionou bem. O que talvez fique complicado é um left, top perdido um do outro.

[bernardodiasc]

Particularmente gosto muito do http://rhodesmill.org/brandon/2011/concentric-css/

Minha habilidade de CSS melhorou depois que compreendi os conceitos do concentric-css, mas é algo praticamente impossivel de se aplicar numa equipe onde o CSS é só uma mera bobagem pra deixar as coisas menos feias. Digo, é como a organização por tipo, apenas equipes interessadas em ter o CSS de qualidade vão se dar ao trabalho de seguir a regra.

[kvnol]

Eu costumo organizar por tipo.

Posicionamento:
position, top, left, right, bottom, z-index

Box-model:
width, height, display, margin, padding

Tipografia:
color, font-family (size, weight...), line-height

Visual:
background (image, color...), border

Sigo a base do @mdo: http://codeguide.co/#css-declaration-order

[andrewsfg]

@kvnol interessante.

[alalbuquerque]

@kvnol sigo esse e ainda coloco as propriedade em ordem alfabética pra ficar separado.

[kvnol]

@andrewsfg Sim! Eu vejo esse método de escrita de CSS como uma alusão ao teclado QWERTY, parece desorganizado mas depois você percebe que é a "melhor forma" de escrever.

[felipefialho]

Boa issue @eduardojmatos,

Já faz uns bons aninhos que ordeno por ordem alfabetica, inclusive, considero problema grave no lint. Acostumei e gosto muito.

[fdaciuk]

Sigo o padrão de organizar alfabeticamente também já faz alguns anos. No começo eu organizava por tipo, mas é como o @eduardojmatos postou: por ordem alfabética acaba se tornando muito automático.

Separando por tipo, ainda que você faça isso por muito tempo, uma hora ou outra vai acontecer de você duplicar a mesma propriedade, e perder alguns minutos/horas/dias/meses/anos pra achar o problema xD

E pensando em times, é muito mais fácil definir um padrão alfabético, que é comum a todo mundo desde a pré-escola, do que um padrão de TOC de alguém haha 😜

[kvnol]

@alalbuquerque Sim! Pode ser uma boa. Eu me acostumei com essa forma por alguns motivos, por exemplo: no posicionamento, eu começo sempre no top indo no sentido horário (top, right, bottom, left).

[kvnol]

Concordo com o @fdaciuk que é um TOC.

[lucasjs]

Nunca parei pra pensar nisso hahaha.
Sempre organizei por tipos. Acredito que é um bom formato . Não é difícil explicar, acho que o problema é é: as pessoas decorarem, ter que explicar tudo para novos colaboradores. Após ler sobre o que vocês falaram, vou ver se consigo propor para a galera aqui usar ordem alfabética. Você consegue explicar em segundos e as pessoas jamais vão esquecer.

[brunoravanhani]

Uso por tipo também, tipo o do @kvnol, agrupado e cada grupo separado por uma quebra de linha à mais, mas fiquei com vontade de tentar organizar alfabeticamente agora.

[giulianovarriale]

Não sei se é pq eu agrupo por tipo, mas não me parece muito natural pensar em definir as propriedades do elemento em ordem alfabética. Normalmente, eu vou estilizando o componente por grupo. Primeiro tipografia, depois bloco, background, borda, posicionamento. Acho que, se eu trabalhasse em um projeto onde o padrão estabelecido fosse ordem alfabética, eu iria primeiro estilizar por grupos, depois rodar o lint e, depois dele me avisar que eu não coloquei em ordem alfabética, aí sim, alterar para ordem alfabética. Nunca tive problema de achar propriedades dentro de um seletor. Enfim, talvez seja só questão de hábito.

[XorAndre]

Eu não consigo trabalhar 100% organizado! Sei lá começar até começo, mas depois sai embaralhado :(

[dionarodrigues]

Desde que eu me entendo por desenvolvedor (rsss), sempre organizei por tipo. Houve uma época, numa empresa que trabalhei, que organizávamos por tipo e, em cada grupo de tipos, por ordem alfabética. No entanto, isso acabava virando bagunça quando se tinha muitas propriedades e muitas pessoas lidando com o mesmo código. Com o tempo acabei abrindo mão dá ordem alfabética por tipos.

Dias atrás estava avaliando organizar tudo por ordem alfabética, abrindo mão dos tipos, e essa issue tem sido de grande importância para que eu vejo como vocês organizam e tomar uma decisão mais assertiva. Vlw @eduardojmatos por levantar esse debate.

[didiraja]

Eu organizo elas por contexto com um olhar meio 3D em camadas. Começo por background, vou para os tamanhos e bordas (border, margin, padding, width e height, nessa ordem), então começo a tipografia (font-family, font-size, line-height) e depois vou completando com o que a classe exige.

Mas independente disso, se você for ordenar por contexto, acho válido você espaçar pelos contextos. Acho essa uma organização melhor que a alfabética, pq evita ficar corrigindo o css de propriedades q estão longe uma da outra.

.classe {
background-color:black;
margin: 0px 0px;
padding: 30px 20px;

font-family: 'Verdana', sans-serif;
font-size: 30px;
}

[thiamsantos]

Artigo relacionado: Organize your CSS properties however you dang like

[felipefialho]

Só um adendo, essa discussão é realmente valida.

Um padrão na escrita das propriedades do CSS ajuda MUITO na mantenibilidade do código.

Peguei um projeto mais antigo onde eu ainda não definia padrões de propriedades (como disse, uso a-z atualmente) e mesmo eu, o próprio criador do código, demorei para me localizar, imaginem quem nunca teve contato com o projeto.

Ao setar as propriedades por ordem alfabética, o seu olhar vai cair exatamente onde determinada propriedade deve estar.

[kvnol]

Não achei que diria isso, mas estou quase convencido em ordenar as propriedades em ordem alfabética. Uma das coisas que ainda não me convencem totalmente é deixar propriedades como width e height ou top e bottom longe umas das outras, pois são propriedades que se complementam e é, praticamente, automático (para mim) escrevê-las uma após a outra.

[felipefialho]

@Knol É só questão de costume. No início parece não fazer sentido, depois é só vantagem.

[eduardojmatos]

@kvnol pode crer, sofro do mesmo mal. Não vejo sentido separa-los, massss vou descobrir como vai ser já que a galera decidiu usar assim lá no GetNinjas heheh

[kvnol]

@eduardojmatos sim, é o que realmente me impede de ir para a ordem alfabética. hahahaha

[bernardodiasc]

De um jeito ou de outro, o segredo é usar linter (hinter) até pegar total costume (aquele momento que o linter nao reclama mais pq fazemos certo de primeira).

[wmsbill]

Eu vou seguir a minha vidinha que já tá boa demais. Se um linter não fizer isso para mim, eu vou ficar de boa escrevendo CSS desordenado como se não houvesse amanhã

Até por que funciona.

[eduardojmatos]

@bernardodiasc sim! O linter vai me ajudar nesse processo hehehe

[eduardojmatos]

@wmsbill ah sim sim, funciona. O lance é quando você trampa num time e todos pensam de forma diferente pra organizar desde as propriedades até nomenclatura de classe, entre outras coisas. No fim isso ajuda a construir uma cultura do time.

E o linter vai ser o amigo fiel de todos nozes 🎉

[lucianobarauna]

Antes fazia por tipo e quando comecei a escrever o CSS por propriedades o ganho na manutenção ajudou bastante. No começo você acha coisa de doido e improdutivo mais com o tempo que vc vai ficando com isso na veia vc consegue sentir os benefícios.
Sigo o http://codeguide.co/ do mdo

[LucasBSousa]

@waldemirflj o verdadeiro "cascading" stylesheet

[mahenrique94]

Faz algum tempo que ordeno as props em ordem alfabética, para mim está sendo muito bom.

[claudiomborges]

Bom dia galera!
Como o assunto apareceu nas minhas notificações novamente, seria muito legal o @eduardojmatos nos passar suas impressões depois da adoção por ordem alfabética, as dores e alegrias durante o processo, e algo mais que ache pertinente. Valeu!