Muitos desenvolvedores da web procuram um repositório no GitHub para contribuir. Quando eles encontram um projeto interessante e começam a contribuir, um desafio comum que enfrentam é localizar onde o estilo de um componente específico é definido, especialmente em um projeto maior.
Felizmente, há uma solução simples: os desenvolvedores da web devem definir os componentes e estilos no mesmo arquivo. Podemos usar a técnica de sintaxe CSS-in-JS para escrever componentes e estilos no mesmo arquivo sem muita complexidade.
De acordo com o criador de componentes estilizados Max Stoiber, mais de 60 por cento das instalações do React também instale uma biblioteca CSS-in-JS. Escrever CSS em JS é extremamente popular, especialmente ao usar uma estrutura JS como React ou Angular. Muitas bibliotecas estão disponíveis para simplificar seu processo de escrever CSS-in-JS.
O que é CSS-in-JS?
Então, o que exatamente é CSS-in-JS? É uma técnica de estilo em que JavaScript é usado para estilizar o componente . Usamos variáveis para definir o CSS do componente. A variável conterá todas as propriedades CSS e o conteúdo será encapsulado no componente, portanto, também terá todas as propriedades CSS definidas.
O uso de CSS-in-JS aumentou recentemente, à medida que o estilo baseado em componentes se tornou mais popular. Além disso, a maioria dos frameworks JavaScript modernos são baseados em componentes, o que alimentou o uso de CSS-in-JS. Devido a isso, CSS agora se tornou um módulo de JavaScript que pode ser definido e usado sempre que necessário.
Em uma estrutura moderna como React, você pode usar a técnica inline para escrever CSS na seção JSX de seu arquivo.js para escrever CSS-in-JS. Mas essa técnica pode ser confusa, menos legível e pode interromper o fluxo do código. Ele não pode substituir a modularidade do CSS ao escrever CSS-in-JS por meio de bibliotecas.
Usando CSS-in-JS
Quando usamos CSS-in-JS, definimos o estilo em uma variável, que podemos usar para definir o estilo dos componentes envolvendo-os na tag da variável.
A tag estilizada é importada da biblioteca. Ele cria um componente React com alguns estilos já definidos. Ele é seguido pelo nome da tag HTML que você deseja usar-no exemplo abaixo, usamos h1 . A tag h1 será personalizada de acordo com as propriedades CSS definidas. Depois de codificar isso, definimos as propriedades, assim:
const Title=styled.h1` família da fonte: sans-serif; tamanho da fonte: 48px; cor: # f15f79; `;
Em seguida, envolvemos o conteúdo na tag variável.
const App=()=> { Retorna( Olá Mundo!
)
;
Viola! É assim que você define os estilos na maioria das bibliotecas CSS-in-JS. Agora que cobrimos o básico, vamos ver algumas vantagens de usar CSS-in-JS.
Vantagens de usar CSS-in-JS
- Compartilhamento fácil de código : compartilhar código se tornará mais fácil e eficiente, pois outras pessoas podem entender facilmente o código em vez de tentar encontrar componentes e estilos dentro do projeto
- Menos carga no DOM : como definimos CSS e componentes no mesmo arquivo, o CSS do componente carregará apenas quando o componente for carregado, reduzindo a carga desnecessária no DOM virtual
- Usando JavaScript em CSS : o CSS é definido no arquivo JavaScript, o que significa que podemos usar lógica JavaScript complexa para definir o valor das propriedades de CSS
- Melhor tratamento de erros em CSS : como o CSS também passa pelo processo de compilação, receberemos mensagens de erro durante o processo, tornando mais fácil encontrar e resolver bugs no CSS
- Portabilidade : ter estilo e componentes no mesmo arquivo facilita o uso do componente em outros projetos
Desvantagens de usar CSS-in-JS
Existem algumas desvantagens em usar CSS-in-JS. Alguns deles são:
- Como o estilo é definido no arquivo
.js, ele afetará o estilo do componente se o JavaScript estiver desativado - Os estilos são analisados duas vezes, uma vez pela biblioteca e depois pelo navegador quando os estilos são inseridos
- Tradicionalmente, quando carregamos uma página da web, um navegador apenas lê CSS e o aplica. Ao usar CSS-in-JS, o navegador gera dinamicamente uma tag de estilo CSS e a lê e aplica à página da web. Ler e gerar isso custa tempo de desempenho
Usando CSS-in-JS de tempo de execução zero
Uma das soluções para melhorar o tempo de desempenho perdido devido à análise dupla é que as bibliotecas devem primeiro converter o bloco CSS-in-JS em um arquivo.css separado. Em seguida, o navegador lerá e aplicará esses estilos à página da web, economizando o tempo de execução que normalmente é desperdiçado ao gerar uma tag de estilo. Isso é chamado de CSS-in-JS de tempo de execução zero. É particularmente útil para projetos em escala ou complexos onde o desempenho é fundamental.
O tempo de execução zero significa que você cria seu estilo em uma sintaxe CSS-in-JS, mas o que é produzido é CSS, como qualquer outro pré-processador faria.
– CSS-Truques
Para obter CSS-in-JS com tempo de execução zero, existem várias bibliotecas que você pode usar. Aqui estão alguns dos mais populares a serem considerados.
Linaria
Linaria é a biblioteca de tempo de execução zero mais popular e foi escrita em TypeScript. Ele tem mais de 7,1 mil estrelas no GitHub e 260 garfos do GitHub. É o meu favorito pessoal de usar porque tem sintaxe fácil de usar e é compatível com quase todas as estruturas modernas. Linaria converte o CSS-in-JS em um arquivo.css separado ao criar a compilação para produção.
Ele oferece muitos recursos, incluindo o seguinte:
- Estilo baseado em prop dinâmico : você pode usar um prop para definir o valor das propriedades CSS
- CSS SourceMap : em projetos grandes, pode ser difícil encontrar onde o estilo é definido para o componente. Se o CSS SourceMap for definido como
trueao escrever CSS, ele mostrará a fonte do nome da classe do CSS gerado nas ferramentas de desenvolvimento - Linting CSS : stylelint o ajudará a evitar qualquer CSS erros e impor convenções em seus estilos
- JavaScript para lógica : você pode usar a lógica JavaScript ao escrever CSS
Veja como instalá-lo em sua máquina.
npm install @ linaria/core @ linaria/react @ linaria/babel-preset @ linaria/shaker
importar {css} de'@ linaria/core';
import {modularScale, hiDPI} de'polido';
importar fontes de'./fonts'; //Escreva seus estilos na tag `css`
const header=css` transformação de texto: maiúsculas; família de fontes: $ {fonts.heading}; tamanho da fonte: $ {modularScale (2)}; $ {hiDPI (1,5)} { tamanho da fonte: $ {modularScale (2.5)}; }
`; //Em seguida, use-o como um nome de classe
Olá, mundo
;
Desvantagens de usar Linaria
- Difícil de implementar : implementar o Linaria corretamente pode ser confuso, pois requer a configuração do Babel
- Configurando o bundler : para extrair CSS de um arquivo JS será necessário o uso de um bundler, como Rollup ou webpack , que pode ser difícil de configurar
- Suporte de plug-in : Linaria não oferece suporte de plug-in de qualidade para Rust
Astroturf
Astroturf foi desenvolvido pela 4Catalyzer e tem mais de 2.000 estrelas no GitHub. É uma ótima alternativa ao Linaria. Astroturf ajuda você a atingir o tempo de execução zero, mantendo o CSS totalmente estático, sem análise de tempo de execução. Você pode escrever CSS-in-JS de várias maneiras através da folha de estilo com escopo do Astroturf, React, e usando adereços e variantes de componentes. Você pode ver a implementação aqui .
Os principais recursos incluem:
- Flexibilidade : alguns frameworks funcionam apenas com determinados processamentos CSS, mas Astroturf é flexível e compatível com a maioria dos frameworks
- Suporte de adereços : suporta recursos de adereços do componente React to style de acordo com os adereços
- Use suas ferramentas existentes : você pode usar Sass e PostCSS para escrever definições de estilo no JavaScript
Veja como começar.
npm i astroturf
importar React de"react";
import {css} de"astroturf";
const btn=css` cor preta; borda: 1px totalmente preto; cor de fundo: branco;
`;
botão de função padrão de exportação ({filhos}) { return ;
}
Desvantagens do Astroturf
- Documentação deficiente : falta um leia-me adequado no GitHub. Também carece de diretrizes de contribuição e a documentação é curta, muitas vezes omitindo detalhes importantes
- Implementação : para extrair estilos, Astroturf requer o agrupamento de um analisador CSS, como rollup ou webpack, que pode ser difícil de implementar
Sombra novamente
Reshadow , desenvolvido por Artur Kenzhaev, tem mais de 340 estrelas no GitHub. Ele é escrito em JavaScript e fornece muitos recursos, como a experiência do desenvolvedor DOM sombra para React virtual semelhante ao DOM, e um deles é escrever CSS-em-JS.
Reshadow oferece as seguintes vantagens:
- O benefício do PostCSS : você terá todos os benefícios do PostCSS para automatizar as operações rotineiras do CSS
- Estilos estáticos : Reshadow oferece uma opção de extração de estilos estáticos, extraindo todo o seu CSS-in-JS em um único arquivo.css
- Módulo CSS : você pode usar um módulo CSS para definir o CSS, assim como fazemos em JavaScript
Aqui está a instalação:
instalação npm-salvar reshadow
importar {css} de'reshadow' estilos const=css` botão { tamanho da fonte: 16px; cursor: ponteiro; preenchimento: 10px 15px; raio da borda: 20px; borda: 2px sólido; cor de fundo: branco; cor: laranja escuro; }
` botão const=({filhos,... adereços})=> estilizado (estilos) ( {crianças} ,
);
Desvantagens do Reshadow
- Documentação e conteúdo de baixa qualidade : há muito pouco conteúdo na web sobre o Reshadow, e os documentos não são incrivelmente completos, então aprender o Reshadow leva tempo e pode ser difícil
- Menos contribuidores : existem muito poucos contribuidores para Reshadow, o que dificulta o processo de resolução de problemas anexados ao repositório GitHub
Conclusão
O CSS-in-JS com tempo de execução zero oferece muitos benefícios, especialmente quando os desenvolvedores contribuem para projetos grandes e múltiplos. O futuro do CSS-in-JS é muito promissor, especialmente quando se trata de desenvolvimento web e estruturas modernas. Espero que você adicione uma dessas bibliotecas quando iniciar seu próximo projeto.
A postagem Comparando os principais zero-bibliotecas CSS-in-JS de tempo de execução apareceram primeiro no LogRocket Blog .
