Como você usa o CSS nos seus componentes em React?

#ReactJS
#JavaScript
#CSS

Existem várias opções diferentes para definir o estilo dos componentes em React. Tudo depende de suas preferências pessoais ou da empresa, e da complexidade específica de sua aplicação.

Se você deseja adicionar apenas algumas propriedades de estilo, o estilo inline é a melhor opção.

Quando você deseja reutilizar suas propriedades de estilo, ou quando seu aplicativo é mais complexo, é mais produtivo utilizar folhas de estilo, CSS Modules, pré processadores CSS (Sass, SCSS, Less, etc.), styled-components ou Stylable.

Componentização e estilos

O conceito de componentização tem sido cada vez mais utilizado e, por consequência, muitas das diferentes opções para estilizar as aplicações vêm surgindo com o objetivo de deixar os componentes de uma aplicação web mais independentes.

Como citado, a componentização nada mais é do que o processo de quebrar o código da sua aplicação em pedaços menores, independentes entre si, facilitando assim a sua (re)utilização e a manutenção. Não há maneira certa nem errada de se fazer isso, tudo depende do seu projeto.

Essa abordagem tem vários benefícios:

Facilidade na hora de testar a aplicação
Facilidade de reutilização do código
Facilidade para dar manutenção
Facilidade para identificar e remover código sem uso

Agora, quando paramos para pensar em qual seria a melhor maneira de estilizar esses componentes, temos algumas opções:

CSS Inline
Folhas de Estilo
CSS Modules
Pré Processadores CSS
Styled-components
Stylable

A seguir, vamos explorar cada uma das formas de usar o CSS embutido nos componentes utilizando o React como base dos nossos componentes.

CSS Inline

Exemplo de CSS Inline:

Podemos criar uma variável que armazena propriedades de estilo e depois passá-la para o elemento:

import React from 'react';

const divStyle = {  
margin: '40px',  
border: '5px solid pink'
};

const pStyle = {  
fontSize: '15px',  
textAlign: 'center'
};

const Box = () => (  
<div style={divStyle}>    
  <p style={pStyle}>CSS Inline</p>  
</div>)
);

export default Box;

Também podemos passar o estilo diretamente:

import React from 'react';

const Box = () => (  
<div style={{color: 'pink'}}>    
  <p style={{textAlign: 'center'}}>CSS Inline</p>  
</div>)
);

export default Box;

Um dos problemas que enfrentamos ao utilizar CSS inline, como mostrado no exemplo acima, é que você não terá acesso a determinados recursos nativos do CSS, como pseudo-selectors, pseudo-elements, media queries, keyframe animations, entre outros. Além disso, pode acabar sendo mais difícil estilizar as tags html e body utilizando esse recurso.

Uma questão a ser observada é que o navegador gasta mais tempo com a renderização do CSS nos scripts, pois precisa mapear todas as regras de estilos passadas para o componente, sendo que a renderização com regras reais do CSS é muito mais rápida.

Folhas de Estilo

Uma forma de usar o CSS dentro de componentes React é o tradicional import de um arquivo externo CSS que concentra todas as regras de estilo.

import React from 'react';
import './Box.css';

const Box = () => (
<div className="Box">
  <p className="Box_text">Folhas de Estilo</p>
</div>
);

export default Box;

Como pode ser verificado no exemplo acima, basta importar o arquivo css ‘./Box.css’ para que seja possível ter um arquivo CSS separado para cada componente.

Essa é a forma mais comum de utilização em qualquer aplicação, seja em React ou outro tipo de framework, e que mantém seus arquivos CSS independentes dos códigos HTML e JavaScript, além de não ter a necessidade de nenhuma instalação ou configuração.

CSS Modules

Um Módulo CSS é um arquivo CSS no qual todos os nomes de classe e nomes de animação têm escopo local por padrão.

import React from 'react';
import styles from './DashedBox.css';

const DashedBox = () => (  
<div className={styles.container}>    
  <p className={styles.content}>CSS Módules</p>  
</div>
);

export default DashedBox;

Similar ao CSS, nós importamos o arquivo DashedBox.css, então acessamos a className como acessamos o objeto.

:local(.container) {   
margin: 40px;   
border: 5px dashed pink; 
};

:local(.content) {   
font-size: 15px;   
text-align: center; 
};

:local(.className) - quando você usa o create-react-app, por causa das configurações do webpack.

.className - se você usar o seu próprio react boilerplate.

Para fazer os CSS Modules funcionarem com o Webpack, você só precisa incluir os módulos mencionados acima e adicionar o seguinte loader ao arquivo webpack.config.js:

{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}

Pré Processadores CSS

Sass & SCSS

É um pré-processador CSS que permite o uso de variáveis, nesting, partials, imports e functions, que adicionam superpowers ao CSS regular. O objetivo é tornar o processo de codificação mais simples e eficiente.

$font-family: 'Open Sans', sans-serif;
$primary-color: #333;

body {
font: 100% $font-family;
color: $primary-color;
}

Saiba mais sobre como usar e instalar o Sass com uma variedade de linguagens de programação em sua documentação oficial Sass: Syntactically Awesome Style Sheets

Less

Less (Leaner Style Sheets) é um pré-processador, open source, de folhas de estilo, que pode ser compilado em CSS e executado no lado do cliente ou no lado do servidor. Ele se inspira em CSS e Sass, e é semelhante ao SCSS. Algumas diferenças notáveis incluem variáveis que começam com o sinal @ em Less e com $ em Sass.

@font-family: 'Roboto', sans-serif;
@primary-color: #4D926F;

body {
color: @primary-color;
font: 100% @font-family;
}

Styled-Components

Styled-components é uma biblioteca para React e React Native que permite que você use estilos em nível de componente em sua aplicação. Esses estilos são escritos com uma mistura de JavaScript e CSS.

Com styled-components é possível utilizar media queries de forma similar à que utilizamos com pré-processadores. Sem contar que também é possível utilizar elementos aninhados, pseudo-elements, inclusive estilizar as tags html e body.

É só colocar o código CSS no mesmo arquivo ou pasta do seu componente, tornando-o dessa forma completamente independente e desacoplado do restante da aplicação, o que pode ser uma excelente vantagem.

Primeiro precisamos instalar a library:

npm install styled-components --save

Agora nós podemos criar uma variável, selecionando um elemento HTML em particular, onde armazenaremos nossos estilos:

import React from 'react';
import styled from 'styled-components';

const MainDiv = styled.div`
color: pink;
`

const Paragraph = styled.p`
text-align: center;
`

const Box = () => (
<MainDiv>
  <Paragraph>styled-components</Paragraph>
</MainDiv>
);

export default Box;

Stylable

Se você não é o maior fã de CSS-in-JS, então o Stylable pode ser para você. É um pré-processador que permite que você defina estilos de componentes para que eles não vazem e entrem em conflito com outros estilos em outras partes da sua aplicação. Ele vem com vários recursos úteis — como a capacidade de definir pseudo-classes personalizadas — para que você possa aplicar estilos aos seus componentes com base no estado. Também é inspirado no TypeScript, com a página inicial do projeto informando:

Nós também ♥ TypeScript. O TypeScript nos ajuda a gerenciar esses grandes projetos, expondo em tempo de build o que podíamos ver apenas uma vez em tempo de execução.Queremos dar ao CSS um sistema de tipos - fazer para o CSS o que o TypeScript faz para o JavaScript.

Quando se trata de integrar o Stylable ao React, eles oferecem um guia prático. Há também o projeto create-stylable-app, que inicializará um aplicativo da web baseado em React com Stylable como solução de estilo.

No momento do build, o pré-processador converte o Stylable CSS em um CSS simples, estático e válido, que funciona em vários navegadores.

@namespace "Example1";

/* Todo Stylable CSS tem uma classe reservada chamada root
que corresponde ao root node do component. */
.root {
-st-states: toggled, loading;
};

.root:toggled { 
color: red; 
};

.root:loading { 
color: green; 
};

.root:loading:toggled { 
color: blue; 
};

/* CSS output*/
.Example1__root.Example1--toggled { 
color: red; 
};

.Example1__root.Example1--loading { 
color: green; 
};

.Example1__root.Example1--loading.Example1--toggled { 
color: blue; 
};

Stylable tem muito mais a oferecer. A documentação oficial de introdução fornece uma explicação detalhada.

Conclusão

Lembre-se de que, no final, não existe maneira certa ou errada de estilizar os componentes. Realmente depende de como você trabalha, das ferramentas que usa e de entender o que você realmente está tentando alcançar.

Espero que este artigo tenha sido útil para você!

E você? Tem alguma preferência ao usar estilos em projetos ReactJS?

Sinta-se à vontade para comentar 🙃