React and JSS for Frontend Heroes

Aquele que trabalha no frontend e nunca sofreu por horas para alinhar um conteúdo ao centro da tela verticalmente e horizontalmente, que atire a primeira pedra. Sim meus caros, dar estilo as coisas é uma tarefa do dia a dia desses heróis mal compreendidos, vistos muitas vezes apenas como “aqueles que copiam e colam as telas feitas por um(a) designer” (sim eu puxei a sardinha pra mim =P), sem mais delongas e piadas vamos ao conteúdo.

Um mundo de coisas

Com o crescimento da internet e dos dispositivos que à ela acessam, tornou-se também necessário evoluir as ferramentas que constroem o que está nela. O que antes limitava-se apenas à páginas repletas de texto e imagens “cruas” acessadas somente de computadores que seguiam o mesmo padrão, hoje temos conteúdo extremamente dinâmico sendo consumido por diversos dispositivos de configurações ainda mais diversas.

O CSS está aí desde o começo dos tempos, e ele também foi evoluindo para atender as demandas distintas, hoje temos SASS, LESS, Stylus, BEM, CSS Modules, JSS, Styled Components e por aí vai, não vamos adentrar em definições exatas nem detalhes sobre cada um desdes neste post.

CSS in JS ou JSS

JSS em palavras rápidas segundo a própria descrição da biblioteca é uma poderosa abstração sobre o CSS que usa Javascript para descrever os estilos, isso faz com que fique mais declarativo e de mais fácil manutenção, o JSS é basicamente um “compilador” de JS para CSS que funciona em tempo de execução e no lado do servidor.

Criando uma “folha de estilos” em JSS.

Apenas algumas coisas mudam quando estamos estilizando com JSS, mas nós vamos aprender um “mantra” bem legal pra criar nossos estilos de forma muito organizada e consistente.

Quando devo usar esse tal de JSS?

Segundo a própria descrição encontrada na biblioteca:

• You build a JavaScript heavy application.
• You use components based architecture.
• You build a reusable UI library.
• You need a collision free CSS (external content, third-party UI components …).
• You need code sharing between js and css.
• Minimal download size is important to you.
• Robustness and code reuse is important to you.
• Ease of maintenance is important to you.
• You just want to use any of its benefits.

Nos exemplos irei utilizar Typescript como linguagem, assim como algumas funcionalidades para tipagem das classes, mas a decisão de usar JS ou TS é livre.

Dicas para criar seus estilos em JSS:

• Cada classe é um Objeto javascript, então pense que você está criando um objeto cujos elementos descrevem propriedades do CSS.
• Utilize o padrão CamelCase para descrever as propriedades do CSS, por exemplo text-align se torna textAlign.
• Crie um arquivo de classes separado para cada componente, página ou seja lá o que você estiver estilizando, isso torna a manutenção e a legibilidade mais fáceis. Essa não é necessariamente uma regra mas, sinceramente deixar seus estilos junto com o resto do código é de doer os olhos.
• Crie um arquivo de classes separado com os estilos que irão se repetir ao longo da sua aplicação, ou seja, um TEMA.

Uma das coisas legais do JSS é que ele evita automaticamente conflitos de nomes, pois ao gerar o arquivo de classes compilado para o CSS ele atribui números únicos a esses nomes, e outra coisa bem massa do JSS com React é que ele usa um sistema de injeção das “classes” de estilo (ou uma HOC para os mais técnicos), então pensando nisso o nosso mantra de criação seria:

1 — Crie e exporte seu objeto de classes JSS;

Vejam só a malandragem de tipar o objeto de classes com a interface do componente para que as classes expressas aqui sejam as mesmas esperadas no componente que vai ser injetado o estilo.

Algumas observações sobre esse modelo: aqui estamos exportando uma função que recebe o parâmetro theme e que retorna o nosso objeto de classes, esse parâmetro nada mais é do que o nosso arquivo que criamos separadamente para armazenar nossos estilos de certa forma ‘globais’. E também estamos fazendo o import da interface que define o tipo desse tema.

2 — Importe esse objeto no componente;

Aqui temos a importação do objeto e também a definição e a importação da interface de classes.

3 — Injete esse objeto no componente;

Neste exemplo foi usado o injectSheet como injetor, mas existem diversos outros, como por exemplo o withStyles do Material UI que oferece um suporte muito bacana para estilização dos componentes do JSS.

4 — Utilize suas classes

Lembrando que em React as Props são a entrada de dados dos nossos componentes, ou seja, nossos estilos injetados sempre virão via props.

Não tem segredo, basta seguir esse mantra em JS ou TS que tudo vai dar certo, e fazendo mais um adendo, as classes injetadas são apenas aquelas que realmente estamos usando, isso torna infinitamente melhor nossa vida enquanto estamos desenvolvendo.

Beyond this point…

Basicamente não existem limites sobre o que você pode fazer com JSS já que como dito anteriormente ele “compila” JS para CSS, a única curva de aprendizado é entender como declarar cada regra de CSS em JSS, mas para isso temos uma documentação bem madura a respeito de “como fazer o que”, além do suporte da comunidade e dentre outros (um salve pro Material UI Next que utiliza JSS e te dá total liberdade para customizar seus componentes). Dúvidas, sugestões ou críticas? É só entrar em contato comigo em alguma das minhas redes.