CSS

25 set, 2018

CSS no JavaScript em componentes React: quais as vantagens e desvantagens?

Publicidade

Se você, assim como eu, já trabalha com desenvolvimento web há um tempo, provavelmente aprendeu que nunca devemos misturar nosso código JavaScript com o nosso código HTML, e sempre evitar colocar estilos diretamente nos elementos (estilo inline). Desde meados dos anos 2000, o conceito de padrões web determina que recursos de marcação, estilização e comportamento devem ser mantidos em arquivos separados.

Dessa forma, aprendemos que o correto é separar cada um desses tipos de arquivos em diretórios distintos e apenas referenciá-los quando necessário através de imports e links, por exemplo:

<! -- importando js e css para uma página HTML -->
<script src="js/arquivo.js></script>
<link rel="stylesheet" type="text/css" href="css/style.css">

Esse conceito se manteve por muito tempo e continua sendo usado para muitos projetos. No entanto, a forma de estruturar as páginas web, especialmente as aplicações web, começou a mudar nos últimos anos, quando o JavaScript se tornou uma linguagem mais robusta e ganhou maior visibilidade. A linguagem que antes só era usada no front-end, tornou-se extremamente flexível e mais poderosa através do ecossistema NodeJS, que é usado no back-end.

Foi esse o marco para o surgimento no mercado de uma verdadeira infinidade de tecnologias e ferramentas baseadas em JavaScript. Esse “boom” começou a mudar alguns velhos paradigmas da programação, e um deles foi o de como devemos desenvolver aplicações web.

Dentre as inúmeras bibliotecas e frameworks que surgiram nesse período, algumas delas se destacaram, como foi o caso do React. Essa tecnologia, desenvolvida e mantida pelo Facebook, hoje é a principal escolha quando se trata de desenvolvimento front-end. Isso porque o React trabalha com a ideia de componentização, baseada na especificação de WebComponents. Neste artigo, vamos ver o que significa esse conceito de componentização utilizando o React e porque a ideia de misturar HTML, CSS e JavaScript já não é mais um absurdo.

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. Por exemplo, poderíamos dividir a página do iMasters em três componentes:

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 quatro opções:

  • CSS Inline
  • Styled Components
  • CSS Módulos
  • Folhas de estilo

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

Existe um grande debate sobre o uso de estilos inline, e cada lado desse debate tem inúmeros argumentos defendendo se o seu uso seria uma prática boa ou ruim. Não vem ao caso neste artigo debatermos a respeito, mas é interessante gastar um tempo para ler a respeito desses argumentos e tirar as próprias conclusões.

Geralmente, o uso de estilos inline acontece quando é realizada uma alteração dinâmica de uma propriedade CSS via JavaScript. Isso é feito com bastante recorrência pelas diversas bibliotecas JavaScript disponíveis no mercado.

Exemplo de CSS inline:

const divStyle = {
  margin: '30px 0',
  padding: '15px',
  border: '1px solid #ccc'
};
const pStyle = {
  fontSize: '16px',
  textAlign: 'center'
};

<div style={divStyle}>
  <p style={pStyle}>Inline styles</p>
</div>

Um dos problemas que enfrentamos ao utilizar CSS puro 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.

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.

Ao contrário do CSS Inline, 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, pseudoelementos e inclusive estilizar as tags html e body.

Assim como no CSS Inline, será necessário colocar o código CSS no mesmo arquivo do seu componente, tornando-o dessa forma completamente independente e desacoplado do restante da aplicação, o que pode ser uma excelente vantagem.

Para utilizar styled-components, é necessário realizar sua instalação, seja via npm ou yarn. Uma vez instalados, a importação da biblioteca é realizada no arquivo do componente onde será utilizada, como se pode visualizar no exemplo abaixo:

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

const DivStyle = styled.div`
  max-width: 1000px;
  margin: 0 auto;
  @media (max-width: 1020px) {
    padding: 0 10px;
  }
`;
const TextStyle = styled.p`
  font-size: '16px',
  text-align: 'center',
  &:hover {
    color: red;
  }
`;

const Container = () => (
  <DivStyle>
    <TextStyle>Styled Components</TextStyle>
  </DivStyle>
)

export default Container;

CSS Modules

CSS Modules (ou Módulos de CSS, em tradução livre) são composições de arquivos CSS em que todos os nomes de classe e animações são definidos em um escopo local como padrão. O termo-chave aqui é escopo local. Guarde esse conceito.

CSS Modules não são uma biblioteca ou ferramenta externa, mas sim um processo que se utiliza de uma arquitetura de componentização.

Utilizando essa biblioteca, os nomes das classes CSS se tornam semelhantes a variáveis locais em JavaScript, o que facilita muito a utilização.

Para que possa funcionar adequadamente, essa técnica requer uma configuração específica que deve ser feita via Webpack. Nesse caso, o Webpack será o responsável por executar toda a magia entre o HTML, o JavaScript e o CSS.

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

const Box = () => (
  <div className={styles.container}>
    <p className={styles.text}>CSS Modulos</p>
  </div>
);

export default Box;

A premissa do CSS Modules é de que cada componente React possui seu próprio arquivo CSS, que está no escopo desse arquivo e componente. Na compilação (build), os nomes das classes locais são mapeados, gerados automaticamente e exportados como um objeto JS para ser utilizado no React.

Folhas de Estilo

A última 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.

O que usar hoje?

Como vimos no decorrer deste artigo, há várias opções disponíveis. Para quem gosta de CSS puro ou quer ser mais conservador, pode usar as Folhas de Estilo tranquilamente. Quem não quer se preocupar com conflitos de nomes de classe, vá de CSS Modules. Se você estiver desenvolvendo para React Native, styled-components é perfeito.

Independentemente da tecnologia que você usar, o importante é ter uma arquitetura de estilos bem definida, sendo intuitiva para outros desenvolvedores que forem contribuir com o projeto.

Por fim, espero que tenha te ajudado e gostaria de deixar um agradecimento especial a todos que me ajudaram a escrever este artigo: Andréa Zambrana, Talita Pagani, Adeonir Kohl e Diego Pinho.

***

Artigo publicado na revista iMasters, edição #26: https://issuu.com/imasters/docs/imasters_26_v6_isuu