Configuração do Stylelint para CSS numa ordem "racional"

[jefferson-william]

Hoje temos um CSS escrito na ordem alfabética.

Sabemos que é possível usar um plugin do stylelint e até mesmo com prettier para escrevermos de uma forma diferente da atual, algo mais "racional" ao invés de alfabético.

Esta issue para é para receber direcionamentos de como podemos avançar com esta discussão, provar seus benefícios e possíveis problemas.

Plugin proposto: https://github.com/jefferson-william/stylelint-config-rational-declaration

[vhoyer]

Um, realmente, sempre me incomodou a ordem alfabética, eu sou a favor dessa ideia :D

[yoji-kojio]

Eu nunca entendi também a questão da ordem alfabética, mas oia...esse plugin aí vai dar uma dor de cabeça no começo até decorar a ordem de cada agrupamento de propriedades hahah
Mas realmente, faz mais sentido que a ordem alfabética.

[vhoyer]

ah, mas aí que ta a vantagem, ele conserta a ordem sozinho, né @jefferson-william? conserta, né? kkkk

[yoji-kojio]

Ah sim, provavelmente deve consertar sim hahah
Mas nem to falando de escrever não, mas sim de ler, to acostumado com a ordem alfabética e vou batendo o olho diretão pra achar as coisas. Mas é tudo questão de costume né 😸

E assim, no geral eu considero que a maior parte das classes css (digo no qbrender) são pequenas, então não vamos notar muito essa organização na maior parte das vezes, iremos notar mais em classes maiores cheias de atributos, normalmente a classe do elemento raiz! Então no dia-a-dia vai parecer só que está tudo em ordem não alfabética mesmo hahah

[jefferson-william]

ah, mas aí que ta a vantagem, ele conserta a ordem sozinho, né @jefferson-william? conserta, né? kkkk

Sim. Ele tem integração com Prettier e ESLint também. Além de como você disse, ele também concerta tudo sozinho se rodar um stylelint --fix ou ao salvar (testado em arquivos .css e .sass).