Aguarde...

10 de fevereiro de 2019

Por que eu escrevo CSS em JavaScript

Por que eu escrevo CSS em JavaScript

Por três anos, estilizei meus aplicativos da web sem nenhum .cssarquivo. Em vez disso, escrevi todo o CSS em JavaScript.

Eu sei o que você está pensando: “por que alguém escreveria CSS em JavaScript ?!” Deixe-me explicar.

O que o CSS-in-JS parece?

Desenvolvedores criaram sabores diferentes de CSS-in-JS . O mais popular até hoje, com mais de 20.000 estrelas no GitHub, é uma biblioteca que eu co-criei, chamada de componentes estilizados .

Usá-lo com o React se parece com isso:

import styled from 'styled-components'

const Title = styled.h1`
  color: palevioletred;
  font-size: 18px;
`

const App = () => (
  <Title>Hello World!</Title>
)

Isso renderiza um palevioletrado <h1>com um tamanho de fonte de 18px para o DOM:

Olá Mundo!

Por que eu gosto de CSS-in-JS

Primeiramente, CSS-in-JS aumenta minha confiança . Eu posso adicionar, alterar e excluir CSS sem quaisquer conseqüências inesperadas. Minhas alterações no estilo de um componente não afetarão mais nada. Se eu excluir um componente, eu também excluo seu CSS. Sem mais folhas de estilo somente anexadas ! ✨

Confiança : Adicione, altere e exclua o CSS sem consequências inesperadas e evite códigos mortos.

Manutenção indolor : Nunca mais busque CSS afetando seus componentes novamente.

As equipes das quais fui membro estão se beneficiando especialmente desse aumento de confiança. Não posso esperar que todos os membros da equipe, principalmente juniores, tenham uma compreensão enciclopédica de CSS. Além disso, os prazos podem atrapalhar a qualidade.

Com o CSS-in-JS, automaticamente evitamos as frustrações comuns do CSS, como colisões de nomes de classes e guerras de especificidade. Isso mantém nossa base de código limpa e nos permite mover mais rápido. 😍

Trabalho em equipe aprimorado : evite as frustrações comuns do CSS para manter uma base de código limpa e se mover rapidamente, independentemente dos níveis de experiência.

Em relação ao desempenho, as bibliotecas CSS-in-JS rastreiam os componentes que eu uso em uma página e apenas injetam seus estilos no DOM. Embora meus .jspacotes sejam um pouco mais pesados, meus usuários fazem o download da menor carga possível de CSS e evitam solicitações de rede extras para .cssarquivos.

Isso leva a um tempo marginalmente mais lento para a interação, mas uma primeira pintura significativa muito mais rápida! 🏎💨

Desempenho Rápido : Envie somente o CSS crítico para o usuário para uma primeira pintura rápida.

Também posso ajustar facilmente os estilos dos meus componentes com base em estados diferentes ( variant="primary"vs variant="secondary") ou em um tema global. O componente aplicará os estilos corretos automaticamente quando eu alterar dinamicamente esse contexto. 💅

Estilo Dinâmico : Simplesmente estilize seus componentes com um tema global ou baseado em estados diferentes.

O CSS-in-JS ainda oferece todos os recursos importantes dos pré-processadores CSS. Todas as bibliotecas suportam prefixos automáticos, e JavaScript oferece a maioria dos outros recursos como mixins (funções) e variáveis ​​nativamente.


Eu sei o que você está pensando: “Max, você também pode obter esses benefícios com outras ferramentas ou processos rigorosos ou treinamento extensivo. O que torna o CSS-in-JS especial? ”

O CSS-in-JS combina todos esses benefícios em um pacote prático e os aplica. Isso me guia para o poço do sucesso : fazer a coisa certa é fácil, e fazer a coisa errada é difícil (ou até mesmo impossível).

Quem usa o CSS-in-JS?

Milhares de empresas usam o CSS-in-JS em produção, incluindo o Reddit , o Patreon , o Target , o Atlassian , o Vogue , o GitHub , o Coinbase e muitos outros.

CSS-in-JS é para você?

Se você estiver usando uma estrutura JavaScript para criar um aplicativo da web com componentes, o CSS-in-JS provavelmente será um bom ajuste. Especialmente se você faz parte de uma equipe em que todos entendam o JavaScript básico.

Se você não tem certeza de como começar, eu recomendo experimentá-lo e ver por si mesmo como é bom! ✌️

Postado em BlogTags:
Escreva um comentário