quero-edu / guidelines

📘 The definitive Quero Education code-style guide.
MIT License
22 stars 2 forks source link

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

Open jefferson-william opened 4 years ago

jefferson-william commented 4 years ago

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 commented 4 years ago

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

yoji-kojio commented 4 years ago

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 commented 4 years ago

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

yoji-kojio commented 4 years ago

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é :smile_cat:

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 commented 4 years ago

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).

vhoyer commented 4 years ago

@jefferson-william você consegue fazer esse PR pra gente?

alexlalves commented 4 years ago

Tendo usado a regra na prática em um projeto da LLL, posso dar uma opinião mais completa agora :slightly_smiling_face:

A minha opinião é que ela produz um código geralmente mais legível, mas ligeiramente mais difícil de escrever. Resolve de fato o nosso querer de agrupar posicionamentos top junto com bottom. But, a ordenação entre grupos de estilos é menos previsível.

Em termos de escrever código, pelo menos a ordem alfabética é previsível. Eu posso escrever a propriedade sabendo onde é seu lugar. O agrupamento entre grupos, por outro lado, não é tão previsível e inevitavelmente vou acabar com um monte de warning (ou pior, error) sublinhando meu código. Para alguém que não trabalha com um autofix rodando a toda hora, todos esses warnings realmente me distraem e tiram minha concentração.

E também que o agrupamento é melhor apreciado com regras maiores. Fica lindo olhando para uns 20 propriedades de CSS, mas em caso mais corriqueiro de 4, 8 propriedades o efeito não é tão drástico.

Não me oponho à inclusão dessa nova ordenação racional, mas não é todo o maravilhoso que promete.

jefferson-william commented 4 years ago

@jefferson-william você consegue fazer esse PR pra gente?

Vou me organizar aqui. :)

vhoyer commented 4 years ago

Realmente, eu gosto de organizar as minhas propriedades racionalmente, porem só separo com espaço entre as categorias quando tem muitas propriedades.

Pra falar a verdade, porque a gente precisa de uma regra de ordenação? o que que isso ajuda mesmo? sinceramente, pensando bem, não vejo ponto nenhum de a gente ter um padrão pra isso, parece mais bike shedding :thinking:

alexlalves commented 4 years ago

Pra falar a verdade, porque a gente precisa de uma regra de ordenação? o que que isso ajuda mesmo? sinceramente, pensando bem, não vejo ponto nenhum de a gente ter um padrão pra isso, parece mais bike shedding :thinking:

Melhor um :bike: sistemático que :bike:s chatos em cada PR

vhoyer commented 4 years ago

:joy: não da pra gente sistematizar a falta desses comentários? hahaah