CSS in JS

CSS in JS é uma técnica que consiste em criar estilos CSS em arquivos JavaScript, isso permite criar componentes e até telas inteiras de forma mais flexível e modularizada.

O CSS foi introduzido pela primeira vez em 1996 e, de lá para cá, sua utilização passou por uma série de transformações significativas.

Originalmente, o CSS era aplicado diretamente nos elementos, dentro de tags de estilo, e evoluiu com a possibilidade de passar os estilos por meio de links em arquivos CSS externos.

Em seguida, vieram os pré-processadores como Sass, Less, Stylus, entre outros, que ofereceram uma nova dimensão para o CSS.

Em 2015 e 2016, os Módulos CSS foram introduzidos, que utilizam um empacotador de módulos como o Webpack para oferecer a possibilidade de escrever módulos CSS.

E, finalmente, chegamos ao CSS in JS, que é uma técnica que veio como resposta aos problemas que surgem ao usar CSS em grande escala.

Por que usar CSS in JS?

Existem muitos motivos que podemos destacar para usar CSS in JS.

Os principais motivos que vou destacar são:

• Escopo de componente: Cada componente tem seu próprio conjunto de estilos aplicados apenas a esse componente. Isso evita conflitos de nomes e sobrescrita de estilos inesperados.
• Estilos Dinâmicos: Permite que você use lógica JavaScript para alterar estilos com base nos estados, propriedades, etc.
• Remoção de CSS morto: Como cada componente tem seu próprio estilo, se um componente não estiver sendo usado, seu estilo também não estará. Isso pode ajudar a diminuir o tamanho do código gerado.

Formação Desenvolvedor Especialista React e Next.js

Conhecer a formação

Como usar CSS in JS ?

Existem várias bibliotecas que auxiliam na implementação, como o styled-components, vue3-styled-components e muitas outras.

• styled-components: permite que você escreva CSS in JS para seus componentes. Os estilos são agrupados com o componente, o que significa que o escopo dos estilos é limitado ao do mesmo e não afeta outros. Porém, é uma biblioteca mais específica para React.

Exemplo:

import styled from 'styled-components';
const Button = styled.button`
  color: grey;
`;

• vue3-styled-components é uma biblioteca que permite que você use CSS in JS com Vue, similar ao styled-components no React.

Exemplo:

import styled from 'vue3-styled-components';
const Button = styled.button`
  color: grey;
`;

Processo de instalação no React

A maioria das ferramentas que utilizam CSS in JS precisam de poucas configurações para funcionar corretamente.

Vamos fazer um exemplo utilizando React. Primeiramente crie um projeto React utilizando o comando:

npx create-react-app my_app_react

Logo em seguida, acesse o diretório do projeto que foi criado:

cd .\my_app_react\

Agora basta instalar a biblioteca de CSS in JS de sua preferência, que funcione muito bem no React. Para esse exemplo vamos utilizar o styled-components, então, basta executar o seguinte comando:

npm install styled-components

Agora, no arquivo App.js, podemos substituir tudo pelo seguinte código:

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

function App() {
  return (
    <Wrapper >
      <Title>
        Hello World!
      </Title>
    </Wrapper >
  );
}

export default App;

Por fim, basta executar o projeto com o seguinte comando:

npm run start

Processo de instalação no Vue

Primeiro, vamos criar um projeto Vue:

npm init vue@latest my_app_vue

Nas opções, você pode escolher No para todas.

Vue.js - The Progressive JavaScript Framework

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Depois, acesse o diretório do projeto executando o seguinte comando:

cd my_app_vue

Agora, basta instalar a biblioteca de CSS in JS de sua preferência, que funcione muito bem com o Vue. Vamos utilizar o vue3-styled-components:

npm install vue3-styled-components

Agora, no arquivo App.vue, podemos substituir tudo pelo seguinte código:

<script setup>
import styled from 'vue3-styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
</script>

<template>
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
</template>
<style></style>

Por fim, basta executar o projeto com o seguinte comando:

npm run dev

Embora o CSS in JS tenha seus benefícios ele também tem algumas desvantagens como, tempo de carregamento mais lento devido ao processamento adicional necessário, uma curva de aprendizado maior e possíveis problemas de compatibilidade com ferramentas e bibliotecas que esperam CSS tradicional.

Conclusão

Em resumo, CSS in JS é uma poderosa técnica moderna para estilização, oferecendo uma maior modularização e capacidade de reutilização. No entanto, como qualquer ferramenta ou técnica, deve ser usada onde faz sentido e as vantagens possam ser balanceadas.

Por fim, caso queira aprender mais sobre CSS in JS saiba que aqui na TreinaWeb temos um direto ao ponto de React - Estilização com Emotion (Styled Components) que possui 00h37 de vídeos.

Conheça também nossa formação de Desenvolvedor Especialista React e Next.js.