Você sabia que a vasta maioria dos websites, aproximadamente 97%, utiliza CSS para personalizar sua aparência?
As Folhas de Estilo em Cascata, conhecidas como CSS, são essenciais para que os desenvolvedores construam páginas web atraentes, fáceis de entender e visualmente agradáveis.
A linguagem CSS define como os documentos são apresentados aos usuários. Um documento, neste contexto, é um arquivo criado usando uma linguagem de marcação, como XML ou HTML.
O que significa estilizar no React?
A facilidade na criação, execução e manutenção de aplicativos React é o principal motivo por trás de sua popularidade. O React, sendo uma biblioteca JavaScript, em vez de um framework, oferece mais do que funções e trechos de código pré-definidos.
A disponibilidade de componentes reutilizáveis, sua flexibilidade, a estabilidade do código, a velocidade e o alto desempenho são algumas das razões pelas quais o React se destaca entre as frameworks e bibliotecas JavaScript.
Estilizar no React é o processo de tornar os diversos componentes de um aplicativo React visualmente atrativos, empregando o CSS. É importante observar que o React utiliza JSX (JavaScript e XML) em vez de HTML como linguagem de marcação. Uma diferença crucial é que o HTML usa “.class” para identificar classes, enquanto o JSX usa “.ClassName” para a mesma finalidade.
Por que usar CSS para estilizar o React?
- Adaptabilidade do seu aplicativo. Os aplicativos da web modernos devem ser acessíveis tanto em telas pequenas quanto grandes. O CSS permite a aplicação de media queries ao seu aplicativo React, tornando-o responsivo a diferentes tamanhos de tela.
- Agilidade no processo de desenvolvimento. É possível reutilizar as mesmas regras CSS em vários componentes do seu aplicativo React.
- Sustentabilidade do aplicativo React. Alterar a aparência de componentes ou partes específicas do seu aplicativo é simples com CSS.
- Melhora da experiência do usuário. O CSS permite formatação amigável. Um React com textos e botões em locais lógicos é fácil de navegar e utilizar.
Existem diversas maneiras que os desenvolvedores podem usar para estilizar seus aplicativos React. Algumas das mais comuns estão listadas abaixo:
Implementando estilos em linha
Os estilos embutidos são a maneira mais direta de estilizar um aplicativo React, pois não exigem a criação de uma folha de estilos externa. O estilo CSS é aplicado diretamente no código React.
É importante lembrar que os estilos em linha têm alta prioridade sobre outros estilos. Portanto, se houver uma folha de estilos externa com alguma formatação, ela será sobreposta pelo estilo em linha.
Veja um exemplo de estilo embutido em um aplicativo React.
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Olá Mundo!!!!!</h1>
<h2>Adicione um pouco de estilo!</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
O elemento exibido apresentará um h1 com um fundo azul claro.
Vantagens do estilo em linha
- Rapidez. É a abordagem mais direta, pois o estilo é adicionado diretamente à tag a ser estilizada.
- Prioridade alta. Os estilos em linha substituem as folhas de estilo externas. Assim, podem ser usados para focar em uma funcionalidade específica sem modificar todo o aplicativo.
- Ideal para prototipagem. Os estilos em linha podem ser usados para testar a funcionalidade antes de incorporar a formatação em uma folha de estilo externa.
Desvantagens do estilo em linha
- Pode ser trabalhoso. Estilizar cada tag diretamente consome tempo.
- Limitações. Não é possível usar recursos CSS, como seletores e animações, com estilos embutidos.
- Muitos estilos em linha tornam o código JSX difícil de ler.
Importando folhas de estilo externas
É possível criar o CSS em um arquivo externo e importá-lo no aplicativo React. Esta abordagem é semelhante à importação de um arquivo CSS na tag <head> de um documento HTML.
Para isso, crie um arquivo CSS no diretório do seu aplicativo, importe-o para o componente desejado e escreva as regras de estilo para o seu aplicativo.
Para exemplificar o uso de folhas de estilo CSS externas, crie um arquivo CSS e nomeie-o como App.css. A importação é feita da seguinte maneira.
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
O trecho de código acima importa uma folha de estilo externa para o componente App.js. O arquivo App.css está localizado na pasta Componentes.
Vantagens das folhas de estilo CSS externas
- Reutilização. A mesma regra CSS pode ser aplicada em diversos componentes de um aplicativo React.
- Código mais organizado. O código fica mais fácil de entender ao usar folhas de estilo externas.
- Acesso a recursos avançados do CSS. É possível usar pseudo-classes e seletores avançados ao utilizar folhas de estilo externas.
Desvantagens das folhas de estilo CSS externas
- Exige uma convenção de nomenclatura robusta para garantir que os estilos não sejam substituídos acidentalmente.
Utilizando Módulos CSS
Os aplicativos React podem crescer bastante. Por padrão, nomes de animações CSS e nomes de classes têm escopo global. Essa configuração pode ser problemática ao lidar com folhas de estilo extensas, pois um estilo pode sobrepor outro.
Os Módulos CSS solucionam esse problema definindo o escopo da animação e dos nomes de classes localmente. Assim, os nomes de classe ficam disponíveis apenas no arquivo/componente onde são necessários. Cada nome de classe recebe um nome programático único, evitando conflitos.
Para implementar Módulos CSS, crie um arquivo com a extensão .module.css. Se desejar nomear sua folha de estilo como estilo, o nome do arquivo será style.module.css.
Importe o arquivo criado no seu componente React e você estará pronto para começar.
Seu arquivo CSS pode ser similar a este:
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
É possível importar o Módulo CSS em seu App.js da seguinte forma:
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Olá leitor do etechpt.com</h1>
);
}
export default App;
Vantagens de usar módulos CSS
- Fácil integração com SCSS e CSS.
- Evita conflitos de nomes de classes.
Desvantagens de usar módulos CSS
- Referenciar nomes de classe usando módulos CSS pode ser confuso para iniciantes.
Utilizando componentes estilizados
Componentes estilizados permitem que desenvolvedores criem componentes usando CSS no código JavaScript. Um componente estilizado funciona como um componente React que já vem com estilos. Eles oferecem estilo dinâmico e nomes de classe exclusivos.
Para começar a usar Componentes Estilizados, instale o pacote na sua pasta raiz usando o seguinte comando:
npm install styled-components
O próximo passo é importar componentes estilizados no seu aplicativo React.
Segue um trecho de código do App.js que usa componentes estilizados:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 80%;
height: 120px;
background-color: lightblue;
display: block;
`;
return <Wrapper />;
}
export default App;
O aplicativo renderizado terá os estilos acima, que foram importados dos componentes de estilo.
Vantagens dos componentes estilizados
- Previsibilidade. Os estilos nesta abordagem são aninhados em componentes individuais.
- Não há necessidade de se preocupar com as convenções de nomenclatura das suas classes. Basta escrever os estilos, e o pacote se encarrega do resto.
- É possível exportar componentes estilizados como props. Componentes estilizados convertem CSS normal em componentes React. Assim, é possível reutilizar esse código, estender estilos via props e exportar.
Desvantagens dos componentes estilizados
- É necessário instalar uma biblioteca de terceiros para começar.
Folhas de Estilo Sintaticamente Impressionantes (SASS/SCSS)
O SASS inclui ferramentas e recursos mais avançados que não estão disponíveis no CSS normal. Você pode escrever estilos em dois formatos diferentes, usando as extensões .scss e .sass.
A sintaxe do SASS é semelhante à do CSS tradicional. No entanto, não é necessário usar chaves de abertura e fechamento ao escrever regras de estilo no SASS.
Um trecho simples de SASS pode ser similar a este:
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
Para começar a usar o SASS no seu aplicativo React, é preciso primeiro compilar o SASS para CSS simples. Depois de configurar seu aplicativo via comando Create React App, instale o node-sass para realizar a compilação.
npm install node-sass
Crie seus arquivos e salve-os com as extensões .scss ou .sass. Em seguida, importe seus arquivos normalmente. Por exemplo:
import "./Components/App.sass";
Vantagens do SASS/SCSS
- Inclui muitos recursos dinâmicos, como mixins, aninhamento e extensão.
- Não é preciso muito código repetitivo para escrever CSS usando SASS/SCSS.
Desvantagens do SASS/SCSS
- Os estilos são globais, e isso pode levar a problemas de prioridade.
Qual é a melhor abordagem de estilização?
Após discutir cinco abordagens, você pode estar se perguntando qual é a melhor. Não há um vencedor claro nesta discussão. No entanto, as seguintes considerações podem ajudar na sua decisão:
- Métricas de desempenho.
- Necessidade de um sistema de design.
- Facilidade para otimizar o código.
O estilo em linha é adequado para aplicativos simples com poucas linhas de código. Contudo, todas as outras abordagens (externa, SASS, componentes estilizados e módulos CSS) são mais apropriadas para aplicativos grandes.
Quais são as melhores práticas para manter o CSS em um grande aplicativo React?
- Evite estilos em linha. Escrever estilos CSS embutidos para cada tag em um grande aplicativo React pode ser exaustivo. Use uma folha de estilo externa que atenda às suas necessidades.
- Analise seu código (lint). Ferramentas como o Stylelint destacam erros de estilo em seu código para que você possa corrigi-los com antecedência.
- Realize revisões regulares de código. Escrever CSS parece fácil, mas revisões regulares de código facilitam a identificação de bugs antecipadamente.
- Automatize os testes em seus arquivos CSS. Enzyme e Jest são ferramentas úteis para automatizar testes em seu código CSS.
- Mantenha seu código DRY. Ao lidar com estilos de uso comum, como cores e margens, use variáveis e classes utilitárias de acordo com o princípio “Don’t Repeat Yourself” (DRY).
- Use convenções de nomenclatura, como Modificador de Elemento de Bloco (BEM). Essa abordagem facilita a criação de classes CSS fáceis de entender e reutilizar.
Conclusão
As informações acima apresentam algumas maneiras de estilizar o React. A escolha da melhor abordagem dependerá das suas necessidades, habilidades e preferências. É possível até combinar várias abordagens de estilização, como folhas de estilo internas e externas, no seu aplicativo React.
Você também pode explorar algumas das melhores estruturas e bibliotecas CSS para desenvolvedores front-end.