Você sabia que mais de 97% dos sites usam CSS para estilizar?
Cascading Style Sheets, ou CSS, permite que os desenvolvedores criem páginas da Web atraentes, escaneáveis e apresentáveis.
A linguagem CSS especifica como os documentos são apresentados ao usuário. Um documento, neste caso, é um arquivo escrito em uma linguagem de marcação como XML ou HTML.
últimas postagens
O que é estilo no React?
A simplicidade de criar, executar e manter um aplicativo React é a principal razão por trás de sua popularidade. O React é uma biblioteca JavaScript em vez de uma estrutura, oferecendo mais do que apenas funções pré-escritas e trechos de código.
A disponibilidade de componentes reutilizáveis, sua flexibilidade, estabilidade de código, velocidade e desempenho são algumas das razões pelas quais o React está classificado entre os frameworks e bibliotecas JavaScript.
Estilizar no React é o processo de tornar vários componentes em um aplicativo React visualmente atraentes usando CSS. No entanto, vale a pena notar que o React usa JSX (JavaScript e XML) em vez de HTML como linguagem de marcação. Uma das principais diferenças é que HTML usa .class para rotular classes enquanto JSX usa .ClassName para denotar o mesmo.
Por que você deve estilizar o React usando CSS?
- Torne seu aplicativo responsivo. Os aplicativos da Web modernos devem ser acessíveis em telas pequenas e grandes. O CSS permite aplicar consultas de mídia ao seu aplicativo React e torná-lo responsivo a vários tamanhos de tela.
- Acelere o processo de desenvolvimento. Você pode usar a mesma regra CSS em vários componentes do seu aplicativo React.
- Torne o aplicativo React sustentável. Fazer alterações de aparência em componentes/partes específicos do seu aplicativo é fácil usando CSS.
- Experiência do usuário aprimorada. CSS permite formatação amigável. Um React com texto e botões em locais lógicos é fácil de navegar e usar.
Existem várias abordagens que os desenvolvedores podem usar para estilizar seus aplicativos React. A seguir estão alguns dos mais comuns;
Escrever estilos embutidos
Os estilos embutidos são a abordagem mais fácil para estilizar um aplicativo React, pois os usuários não precisam criar uma folha de estilo externa. O estilo CSS é aplicado diretamente ao código React.
Vale a pena notar que os estilos inline têm alta precedência sobre outros estilos. Assim, se você tivesse uma folha de estilo externa com alguma formatação, ela seria substituída pelo estilo inline.
Esta é uma demonstração de estilo embutido em um aplicativo React.
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>
<h2>Add a little style!</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
O elemento exibido exibirá um h1 com fundo azul claro.
Prós do estilo inline
- Rápido. É a abordagem mais simples, pois você adiciona estilo diretamente à tag que deseja estilizar.
- Tem grande preferência. Os estilos embutidos substituem as folhas de estilo externas. Assim, você pode usá-lo para se concentrar em uma determinada funcionalidade sem alterar todo o aplicativo.
- Incrível para prototipagem. Você pode usar estilos embutidos para testar a funcionalidade antes de incorporar a formatação em uma folha de estilo externa.
Contras do estilo inline
- Pode ser tedioso. Estilizar cada tag diretamente é demorado.
- Limitado. Você não pode usar recursos CSS como seletores e animações com estilos embutidos.
- Muitos estilos inline tornam o código JSX ilegível.
Importando folhas de estilo externas
Você pode escrever CSS em um arquivo externo e importá-lo para o aplicativo React. Essa abordagem é comparável à importação de um arquivo CSS na tag
de um documento HTML.Para conseguir isso, você precisa criar um arquivo CSS no diretório do seu aplicativo, importá-lo para o componente de destino e escrever regras de estilo para seu aplicativo.
Para demonstrar como as folhas de estilo CSS externas funcionam, você pode criar um arquivo CSS e nomeá-lo como App.css. Você pode exportá-lo 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.
Prós de folhas de estilo CSS externas
- Reutilizável. Você pode usar a(s) mesma(s) regra(s) CSS em diferentes componentes em um aplicativo React.
- Torna o código mais apresentável. Compreender o código é fácil ao usar folhas de estilo externas.
- Dá acesso a recursos CSS avançados. Você pode usar pseudo-classes e seletores avançados ao usar folhas de estilo externas.
Con de folhas de estilo CSS externas
- Requer convenção de nomenclatura confiável para garantir que os estilos não sejam substituídos.
Usar Módulos CSS
Os aplicativos React podem ficar muito grandes. Nomes de animação CSS e nomes de classe são, por padrão, com escopo global. Essa configuração pode ser problemática ao lidar com folhas de estilo grandes, pois um estilo pode substituir outro.
Os módulos CSS resolvem esse desafio ao definir o escopo da animação e dos nomes das classes localmente. Essa abordagem garante que os nomes de classe estejam disponíveis apenas no arquivo/componente em que 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 .module.css. Se você quiser nomear sua folha de estilo como estilo, o nome do arquivo será style.module.css.
Importe o arquivo criado para seu componente React e você estará pronto para começar.
Seu arquivo CSS pode se parecer com isto;
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
Você pode importar o Módulo CSS em seu App.js da seguinte maneira;
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello etechpt.com reader</h1>
);
}
export default App;
Prós de usar módulos CSS
- Integra-se facilmente com SCSS e CSS
- Evita conflitos de nome de classe
Contras de usar módulos CSS
- Referenciar nomes de classe usando módulos CSS pode ser confuso para iniciantes.
Usar componentes de estilo
Os componentes estilizados permitem que os desenvolvedores criem componentes usando CSS no código JavaScript. Um componente estilizado atua como um componente React que vem com estilos. Componentes estilizados oferecem estilo dinâmico e nomes de classe exclusivos.
Para começar a usar o Styled Components, você pode instalar o pacote em sua pasta raiz usando este comando;
npm install styled-components
A próxima etapa é importar componentes estilizados para seu aplicativo React
A seguir está um trecho de código de 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 importados dos componentes de estilo.
Prós de componentes estilizados
- É previsível. Os estilos nesta abordagem de estilo são aninhados em componentes individuais.
- Não há necessidade de se concentrar nas convenções de nomenclatura de suas classes. Basta escrever seus estilos e o pacote cuidará do resto.
- Você pode exportar componentes estilizados como adereços. Componentes estilizados convertem CSS normal em componentes React. Assim, você pode reutilizar esse código, estender estilos por meio de props e exportar.
Con de componentes estilizados
- Você precisa instalar uma biblioteca de terceiros para começar.
Folhas de estilo sintaticamente impressionantes (SASS/SCSS)
O SASS vem com ferramentas e recursos mais poderosos que faltam no CSS normal. Você pode escrever estilos em dois estilos diferentes guiados por essas extensões; .scss e .sass.
A sintaxe do SASS é semelhante à do CSS usual. No entanto, você não precisa dos colchetes de abertura e fechamento ao escrever regras de estilo no SASS.
Um trecho simples do SASS aparecerá da seguinte maneira;
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 em seu aplicativo React, você precisa primeiro compilar o SASS para CSS simples. Depois de configurar seu aplicativo por meio do comando Create React App, você pode instalar o node-sass para cuidar da compilação.
npm install node-sass
Você pode então criar seus arquivos e dar a eles extensões .scss ou .sass. Você pode então importar seus arquivos da maneira normal. Por exemplo;
import "./Components/App.sass";
Vantagens do SASS/SCSS
- Ele vem com muitos recursos dinâmicos, como mixins, aninhamento e extensão.
- Você não precisa de muito clichê para escrever código CSS ao usar SASS/SCSS
Contras do SASS/SCSS
- Os estilos são globais e, portanto, você pode se deparar com problemas prioritários.
Qual é a melhor abordagem de estilo?
Como discutimos cinco abordagens, você quer saber qual é a melhor. É difícil destacar o vencedor absoluto nesta discussão. No entanto, essas considerações o ajudarão a tomar uma decisão informada:
- As métricas de desempenho
- Se você precisa de um sistema de design
- A facilidade de otimizar seu código
O estilo embutido é adequado quando você tem um aplicativo simples com poucas linhas de código. No entanto, todos os outros; externo, SASS, componentes estilizados e módulos CSS, são adequados para aplicativos grandes.
Quais são as práticas recomendadas para manter o CSS em um aplicativo React grande?
- Evite o estilo inline. Escrever estilos CSS embutidos para cada tag em um grande aplicativo React pode ser cansativo. Em vez disso, use uma folha de estilo externa que atenda às suas necessidades.
- Lint seu código. Linters como o Stylelint destacarão os erros de estilo em seu código para que você possa corrigi-los com antecedência.
- Faça revisões regulares de código. Escrever CSS parece divertido, mas análises regulares de código facilitam a identificação de bugs com antecedência.
- Automatize testes em seus arquivos CSS. Enzyme e Jest são ferramentas incríveis que você pode usar para automatizar testes em seu código CSS.
- Mantenha seu código DRY. ao lidar com estilos comumente usados, como cores e margens, use variáveis e classes utilitárias conforme o princípio Don’t Repeat Yourself (DRY).
- Use convenções de nomenclatura, como Modificador de Elemento de Bloco. Essa abordagem facilita a criação de classes CSS fáceis de entender e reutilizar.
Conclusão
Acima estão algumas das maneiras que você pode usar para estilizar o React. A escolha da abordagem de estilo dependerá de suas necessidades, habilidades e gosto. Você pode até combinar várias abordagens de estilo, como folhas de estilo internas e externas, em seu aplicativo React.
Você também pode explorar algumas das melhores estruturas e bibliotecas CSS para desenvolvedores front-end.