Sobre refatorar projetos com um único arquivo CSS gigante

[dayanyrec]

Pessoal,
por onde começar a refatorar e quais estratégias de desenvolvimento vcs usam ao encontrar projetos com um único arquivo CSS gigante?
Sabendo que o projeto tem que continuar rodando, ideias sobre testes são muito bem vindas.

[bernardodiasc]

Sugestão:

1. Diagnóstico: anote todas as estatísticas do estado atual do CSS, tem varios valores uteis, desde o tamanho do arquivo, quantidade de linhas, quantidade de arquivos separados, etc. tambem pode pegar informações mais detalhadas com ferramentas tipo o CSS Dig. Abra uma planilha e colete todas as informações, vai lendo o css, conferindo no browser e faça anotações sempre que ver algo estranho ou errado. Tire screenshots das telas e de todas as variações que encontrar e ponha isso junto com a planilha, vai ser util depois pra verificar regressões.
2. Planejamento: elabore uma proposta do que vai ser refatorado com base na diagnóstico, nada muito formal ou complexo, quando voce entender o problema com detalhes vai saber explicar o que precisa ser melhorado e como pretende fazê-lo, cada caso é um caso, vai anotando na planilha por exemplo sugestões de soluções para cada problema que encontrar, alem de mudanças de abordagem na estrutura de arquivos, nomenclatura, etc. Referencie outros autores e artigos sobre tecnicas e metodologias que pretende implementar se houver, não precisa reescrever toda a teoria sobre BEM, ja esta escrito.
3. Refatoração:
   1. Instale um Linter, anote todas as ocorrencias e começe a resolve-las. isso nao costuma gerar regressao, entao é relativamente seguro de fazer. é bem chato, nao tente melhorar o codigo agora pq a ideia é só limpar e padronizar sem correr riscos.
   2. Se houverem planos para reorganizar a estrutura dos arquivos, faça isso entao, tambem costuma ser seguro, se houver problemas com a ordem do css carregado vai ser relativamente facil de perceber.
   3. Com o código limpo e os arquivos reorganizados, comece a atacar cada item da sua planilha, com paciencia e verificando o resultado pra garantir que nao há regressão. Essa parte é quando voce realmente modifica o css e pode gerar muitos bugs, por isso va de pouco em pouco, pequenas partes de cada vez.
4. Avaliação: depois que terminar a refatoração, faça uma avaliaçao dos resultados, basicamente o que fez no diagnostico, dessa vez tambem conferindo o que foi modificado, incluindo anotacoes de como foi modificado (nem sempre sai como planejado, eh bom saber o que foi feito na pratica, se foi diferente ou se foi o planejado).
5. Profit. 🎉

Essa é uma tarefa bem dificil, se o projeto estiver em andamento, mais dificil ainda. Voce precisa do apoio e participaçao de todos que encostam no CSS, e se puder ir entregando pequenas partes refatoradas separadamente, outros devs poderam continuar o trabalho deles no novo CSS, se nao fizer isso, pode ter muito problema com conflitos de modificaçoes posteriores.

PS: CSS é 100% relativo ao HTML, isso costuma ser um obstaculo gigante dependendo da plataforma/linguagem que gera o HTML. Pode ser necassária refatoraçao do HTML, isso significa muito trabalho as vezes.

Acho que é isso, bem resumido, espero que ajude. :)

[bernardodiasc]

Outra estratégia é refazer os componentes separadamente e reintegrá-los, meio que descartando os anteriores e implementando novamente os novos. Voce pode fazer isso separadamente em algum sandbox, por exemplo.

[bernardodiasc]

Se for trabalhar com ferramentas de testes, tem muitas formas. Em resumo, é preciso escrever os testes antes de modificar o código, modificar e então verificar as regressões. Voce pode adicionar ferramentas de testes pra te auxiliar nas verificações na estratégia que comentei.

Particularmente não tive oportunidade de usar ferramentas de teste de regressão visual. Esse artigo é bem interessante https://css-tricks.com/automating-css-regression-testing/

Algumas ferramentas vão avaliar pelo html, ou melhor, inspecionar os seletores css pelo html. Outras vão comparar screenshots, outras vão literalmente navegar nas paginas e verificar o resultado. Tem muitas formas mesmo. Vale a pena tentar se a configuração e manutenção dos testes não for complicar demais, as vezes acaba atrapalhando e sendo mais facil fazer esse processo manualmente, por exemplo, tirar os screenshots antes e comparar o resultado com algo tipo https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

[dayanyrec]

Obrigada pelas respostas @bernardodiasc !
Achei bem interessante a abordagem, os links...
Ferramentas de regressão me interessam bastante.
Outro ponto que notei é que esse trabalho requer bastante integração da equipe pra poder funcionar bem.