Estou acompanhado por Dustin Schau neste vídeo e ele vai me levar em um tour pelo mundo do que ficou conhecido como CSS-in-JS. Ou seja, fazer seu estilo inteiramente em JavaScript, em vez de em .cssarquivos que você cria na cabeça sozinho.
Dustin é um guia perfeito para isso, pois criou uma ótima ferramenta exploratória chamada CSS no JS Playground e também tem um curso inédito sobre o assunto.
Se você está curioso para saber por que alguém estaria interessado em seguir a rota CSS-in-JS, aqui estão alguns motivos que discutimos no vídeo:
- Eliminação de código morto. Os únicos estilos carregados são os estilos dos componentes em uso a qualquer momento. Não há envio de estilos não utilizados. Quando um componente morre, seus estilos também morrem.
- Escopo. Escrever novos estilos não pode afetar mais nada em outros lugares do site, então não há necessidade de se preocupar em escrever um estilo que tenha consequências ruins ou indesejadas em outro lugar devido a um seletor no escopo global. Obtemos proteção de escopo com ideologias de nomenclatura como BEM, mas não é imposta por ferramentas.
- Nomeação sem preocupações. Em alguns casos, não há necessidade de escolher um nome de classe ou ID para o que está sendo estilizado, uma vez que a saída contém a IU.
- Ergonomia do desenvolvedor. Pode ser bom ter estilos no mesmo arquivo (ou muito próximo) do próprio componente. Da mesma forma, alguns desenvolvedores se sentem muito confortáveis com JSX. Além disso, ser capaz de estilizar as coisas sem nenhuma preocupação com o escopo significa que os desenvolvedores podem se sentir capacitados sobre o estilo, em vez de intimidados por ele.
- Sistema de design amigável. Os sistemas de design têm tudo a ver com componentes e o React também. Esses modos complementares de pensamento se alinham muito bem uns com os outros.
- Possibilidades de JavaScript em CSS. Fazer isso com operadores lógicos e valores passados e matemática e outros enfeites, ter todo o poder do JavaScript em estilos é muito útil.
E isso não é tudo, mas você pode ver por que é atraente para algumas pessoas. Certamente inspirou muitas discussões. Por que não quando oferece todos esses benefícios? Bem, é um ambiente de desenvolvimento muito diferente que não necessariamente agrada a todos. É necessário dobrar a plataforma da web para fazer coisas um tanto incomuns e isso vem com verrugas. Sem mencionar que há um custo literal para isso (tamanho dos pacotes e outros) que os usuários pagam, e é melhor você esperar que pague com eficiência.
Dustin chegou ao ponto de construir uma demonstração usando Sass para estilizar as coisas para compará-la com como isso pode ser feito com CSS-in-JS, que demonstra como é a aparência de estilos de portabilidade, bem como as possibilidades de fazê-lo.