Você andam utilizando utility classes?

[luizbills]

Gostaria saber se vocês andam utilizando utility classes? Ou o que vocês fazem para deixar o css mais modular?

[felipefialho]

Acho essa abordagem bem ruim e muito próxima de escrever CSS inline. E especialmente hoje, buscando escrever CSS mais isolado, essa estratégia pode dar bastante problema de vazamento de escopo.

Pode ser útil em alguns casos (classes como screen-reader por exemplo, ajuda a criar projetos mais acessiveis. Mas precisa ser usado com parcimônia.

[tarciozemel]

Não sou totalmente contra esta abordagem, embora seja mais apropriada para cenários de prototipagem.

Para ter CSS raiz mais modular você pode usar convenções como SMACSS ou ITCSS.

[wmartins]

Utilizo essa abordagem em um dos times que trabalho e isso funciona muito bem pra gente, visto que alguns devs não curtem muito escrever CSS. Além disso, temos um guia de estilos 100% bem definido (cores, espaçamentos, bordas e etc), assim, fica mais "fácil" reutilizar esses estilos. Com isso, os nossos designers não fogem muito desses estilos, e isso facilita a criação das telas.

Entretanto, quando as coisas fogem um pouco desses estilos "padrão", estamos utilizando o Aphrodite, que permite um nível de modularização bem bacana.

Acho que ficou uma solução bem legal para a nossa realidade, visto que temos um bom nível de padronização dos estilos (que resolveu o problema dos devs que não curtem escrever CSS), aliado com o suporte para a criação de pequenas customizações. No fim, a gente consegue sempre (ou quase sempre) ter as telas o mais fiel com o desenho o possível, e sem reclamações de "CSS é muito chato".

[caioincau]

Não gosto muito, acho que fica um código verboso e feio, uso BEM tem alguns anos e tem me atendido bem, apesar de já ter tido vontade de testar SMACSS fora de projetos pessoais/pocs.

[luizbills]

@wmartins as maiores vantagens mesmo que eu também vejo é a real modularização do css e o single source of truth, nada de números mágicos ou aqueles espaçamentos sempre divergentes. Já vi vários projeto que o pessoal usa sass e mesmo assim não criaram variáveis para valores de espaçamento.

[wmartins]

Pois é @luizbills, isso pra nós foi uma mão na roda, ao invés de ter várias declarações de padding na nossa codebase, temos umas 5 ou 6 (todos os "níveis" de padding que precisamos) e todo mundo reutiliza. Mas isso só funcionou por termos um guia de estilos que todo mundo segue, caso contrário, ficaria um pouco complicado de gerenciar o design e dev.

Como tu mesmo falou, daria pra se usar algo como SASS e reutilizar, mas aí vai do alinhamento do time que tu trabalha com as boas práticas. Para, nós foi uma alternativa viável, pois, pra fazer usando SASS (PostCSS Variables, no nosso caso) teríamos que mudar algumas questões culturais, o que as vezes não é muito fácil.

[klarkc]

Ótimo para protótipos e MVP, horrível para a evolução do software.

[tarciozemel]

@luizbills @caioincau @klarkc

Tem um meio-termo interessante, que é construir uma biblioteca de utilitários com placeholder selectors (Sass) e usar bastante @extend na definição das regras. Cai bem com SMACSS e ITCSS; dá para nomear com BEM ou qualquer outra convenção.

Provavelmente vocês já devem ter ouvido falar (e/ou mesmo já usam), mas aqui explico rapidinho como é o esquema: https://www.udemy.com/sass-placeholders-o-jeito-certo/