O desavisado que lê este título, de certo vai pensar que o autor deixou o computador a mercê do seu filho de três anos. De fato, quando publiquei o link do repositório do github no minha timeline do Facebook, ninguém entendeu. Em parte porque cuido de manter meu círculo de amigos restrito àqueles que de fato o são. Porém, depois de meses pesquisando um workflow que me permitisse um grande head start (perdão pelos inevitáveis jargões ianques) no desenvolvimento de temas do WordPress integrado com sass e browser sync, além de outras mumunhas mais, no momento em que consegui reunir e testar todas essas tecnologias em um único pacote, o grito de “eureca!” nas redes sociais foi inevitável.
Rebimboca da parafuzeta
Bem, vamos trocar em miúdos o que de fato é essa caixa de ferramentas? Para começar, para poder usar usá-la, é preciso saber o que é, e principalmente como usar, o github. Git/github é um sistema gratuito de controle de versão que permite que você salve diversos níveis de desenvolvimento do seu projeto, sem precisar criar cópias dos seus arquivos. Na minha experiência, além de ocupar espaço físico desnecessário no seu HD, essas cópias frequentemente perdem sentido conforme o trabalho progride, já que, se você não se dá ao trabalho de documentá-las, dificilmente vai saber a que ponto exato do projeto ela se refere. É aí que o git faz sua mágica. Basicamente, com o link do meu workflow disponibilizado no github você tem a fotografia de um ponto comum do desenvolvimento de um tema de worpress.
Neste ponto de partida, você tem a estrutura básica do _s, (não confunda com underscore.js), um tema inicial de WordPress criado pela Automattic, grupo por trás do sistema de blog mais popular do mundo. A ideia é que você trabalhe com uma garantia de solidez nas fundações do seu tema. E melhor, podendo utilizar o sass, linguagem que garante múltiplas funcionalidades ao seu CSS, como o poder de definir variáveis que podem ser reutilizadas na sua folha de estilos.
“Calma aí… variáveis?? Mas eu sou designer…”
Não troque de canal ainda, colega! Vou dar um exemplo simples em que esse benefício vai ser tangível para você. Digamos que após o processo de desenvolvimento de layout estático, já aprovado pelo cliente, você estrutura sua folha de estilos utilizando rgb(43, 134, 186), valores correspondentes a um determinado tom de azul. É fácil prever que esse código (e variações do mesmo, mais claras, mais escuras, mais ou menos saturadas) ocorrerá em dezenas linhas do seu CSS. Porém, ao ver o site no ar, o cliente acha que aquela cor não é a ideal. Seu trabalho agora será encontrar todas as ocorrências desse código no CSS e substituir por outro. E por outro. E por outro. Até a aprovação final do decisor. “Ok, mas eu posso usar o copy/paste”. Sim, mas caso você tenha trocado rgb(43, 134, 186) por rgb(42, 135, 187), variação imperceptível até mesmo para um designer, o copy/paste não vai fazer esse trabalho para você. Com o sass, você pode criar uma amostra da cor e referenciá-la com um nome, como se fosse uma sub-classe, que pode ser alterada em apenas uma linha e esta alteração se replicará em todas as demais ocorrências. Além do mais, o que dizer das múltiplas variações de tonalidade ao longo da folha? Usando sass, através de funções, você pode alterar a tonalidade dessa cor, da mesma forma que fazemos em programa de editoração (até melhor, na realidade), sem precisar criar uma nova amostra. E veja que qualquer declaração de CSS pode ser armazenada em uma variável e reutilizada indefinidamente. Valores de padding, margin e rounded-corners, uma vez definidos no projeto gráfico, precisam ser alterados apenas uma vez!
Sass é incrível e a curva de aprendizado para quem já sabe CSS é mínima. Porém, o seu navegador não lê sass, ele precisa que esse código seja traduzido em CSS para que ele possa interpretar. Para isso, há diversas opções, programas gratuitos e pagos com GUI (graphic user interface), como o Codekit e o PrePros, e alternativas que precisam ser ativadas através do código. No meu workflow, utilizo um plugin chamado Grunt que faz isso automaticamente, gerando o seu style.css para você. Além disso, as tarefas definidas no arquivo do Grunt fazem duas pequenas mágicas para você. Ele injeta o código de todas as declarações de CSS que precisam de prefixo para funcionar (como por exemplo, flex-box) e recarrega o seu navegador a cada vez que você salva o seu documento. Pense nisso amigo… quantas vezes você pressiona F5 ou Cmd+R na construção de um projeto complexo como o desenvolvimento ou personalização de um tema de WordPress? Agora pense no tempo que você vai ganhar se poupando das futuras sessões de fisioterapia…
E veja que as tarefas configuradas no gruntfile.js (arquivo de controle do plugin) não se limitam às alterações associadas a sass/css, elas monitoram também qualquer arquivo que tenha as extensões js, html e php, estejam ou não em subdiretórios dentro da raiz do projeto, cuidando para que o navegador seja recarregado automaticamente após qualquer mudança.
Ótimo, onde é que eu assino?
Tudo isso pode ser seu de graça! Bem, não de graça, a verdade é que você vai precisar fazer amizade com uma temida entidade: CLI, ou command line interface. Para que você consiga utilizar esse pacote, é preciso superar o medo ancestral do terminal. E digo isso não só pensando nos designers, há muito desenvolvedor que quer vê-la de retro. Mas, como qualquer medo, uma vez que o encare de frente, verá que ele está muito mais na sua cabeça. E mais: o benefício de usar a linha de comando abre um horizonte promissor à sua frente. Um mundo de alternativas open source que estão livres do compromisso com Apps que muitas vezes são boas em marketing, mas não tão eficientes quanto parecem. E mais: o cutting edge da tecnologia está sempre à frente do desenvolvimento de interfaces gráficas – pelo simples motivo que o desenvolvimento de GUI leva tempo. Então, mãos à obra! Acesse o repositório do github e siga as instruções!
PS: Não ignoro que existem ferramentas como o bower e yeoman que potencialmente podem entregar solução semelhante à que criei no meu repositório, mas à época em que escrevi este post, não localizei nenhuma alternativa pronta para uso. Se houvesse encontrado, pode ter certeza que a utilizaria, não tenho vocação para reinventar a roda. No entanto, se você, prezado leitor, encontrá-la, por favor divida-a conosco!