5 maneras de dar estilo a React usando CSS [2023]

¿Sabía que más del 97% de los sitios web utilizan CSS para dar estilo?

Hojas de estilo en cascada, o CSSpermite a los desarrolladores crear páginas web atractivas, escaneables y presentables. 

El lenguaje CSS especifica cómo se presentan los documentos al usuario. Un documento, en este caso, es un archivo escrito en un lenguaje de marcado como XML o HTML. 

¿Qué es el estilo en React?

La sencillez de crear, ejecutar y mantener una aplicación React es la principal razón de su popularidad. React es una biblioteca JavaScript más que un framework, que ofrece algo más que funciones preescritas y fragmentos de código. 

La disponibilidad de componentes reutilizables, su flexibilidad, la estabilidad del código, la velocidad y el rendimiento son algunas de las razones por las que React ocupa un lugar destacado entre Marcos de trabajo de JavaScript y bibliotecas. 

El estilo en React es el proceso de hacer que varios componentes de una aplicación React sean visualmente atractivos utilizando CSS. Sin embargo, cabe destacar que React utiliza JSX (JavaScript y XML) en lugar de HTML como lenguaje de marcado. Una de las principales diferencias es que HTML utiliza .class para etiquetar clases, mientras que JSX utiliza .ClassName para denotar lo mismo. 

¿Por qué hay que aplicar CSS a React?

• Haz que tu aplicación sea responsive. Las aplicaciones web modernas deben ser accesibles tanto en pantallas pequeñas como grandes. CSS te permite aplicar consultas de medios a tu aplicación React y hacerla adaptable a distintos tamaños de pantalla.
• Acelerar el proceso de desarrollo. Puedes utilizar la misma regla CSS en varios componentes de tu aplicación React. 
• Hacer que la aplicación React sea mantenible. Realizar cambios de apariencia en componentes/partes específicas de tu aplicación es fácil utilizando CSS. 
• Experiencia de usuario mejorada. CSS permite un formato fácil de usar. Un React con texto y botones en lugares lógicos es fácil de navegar y utilizar. 

Hay varios enfoques que los desarrolladores pueden utilizar para dar estilo a sus aplicaciones React. Los siguientes son algunos de los más comunes;

Escribir estilos en línea

Los estilos en línea son el método más sencillo para dar estilo a una aplicación React, ya que los usuarios no necesitan crear una hoja de estilos externa. La página Estilo CSS se aplica directamente al código React.

Cabe señalar que los estilos en línea tienen prioridad sobre otros estilos. Por lo tanto, si tuviera una hoja de estilo externa con algún formato, sería anulado por el estilo en línea. 

Esta es una demostración de estilo en línea en una aplicación React. 

import React from 'react';

import ReactDOM from 'react-dom/client';

const Header = () => {

  return (

    <>

      <h1 style="{{backgroundColor:" "lightblue"}}>¡¡¡¡¡Hola Mundo!!!!!</h1>

      <h2>¡Añade un poco de estilo!</h2>

    </>

  );

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<header />);

El elemento mostrado mostrará un h1 con un fondo azul claro. 

Ventajas del estilo en línea

• Rápido. Es el método más sencillo, ya que se añade el estilo directamente a la etiqueta que se desea estilizar.
• Tiene gran preferencia. Los estilos en línea sustituyen a las hojas de estilo externas. Por lo tanto, puede utilizarlos para centrarse en una funcionalidad concreta sin cambiar toda la aplicación. 
• Impresionante para la creación de prototipos. Puede utilizar estilos en línea para probar la funcionalidad antes de incorporar el formato en una hoja de estilo externa. 

Contras del estilo en línea

• Puede ser tedioso. Estilizar directamente cada etiqueta lleva mucho tiempo. 
• Limitado. No puedes utilizar funciones CSS como selectores y animaciones con estilos en línea. 
• Muchos estilos en línea hacen ilegible el código JSX. 

Importación de hojas de estilo externas

Puedes escribir CSS en un archivo externo e importarlo a la aplicación React. Este enfoque es comparable a importar un archivo CSS en la etiqueta de un documento HTML.

Para conseguirlo, tienes que crear un archivo CSS en el directorio de tu aplicación, importarlo a tu componente de destino y escribir reglas de estilo para tu aplicación.

Para demostrar cómo funcionan las hojas de estilo CSS externas, puede crear un archivo Archivo CSS y nómbrelo App.css. A continuación, puede exportarlo de la siguiente manera. 

importa { React } de "react";

importar "./Components/App.css";

function App() {

  devuelve (

    <div classname="main">

    </div>

  );

}

export default App;

El fragmento de código anterior importa una hoja de estilos externa al componente App.js. El archivo App.css se encuentra en la carpeta Components. 

Ventajas de las hojas de estilo CSS externas

• Reutilizable. Puedes utilizar la misma regla CSS en diferentes componentes de una aplicación React. 
• Hace que el código sea más presentable. Comprender el código es fácil cuando se utilizan hojas de estilo externas. 
• Acceso a funciones CSS avanzadas. Puede utilizar pseudoclases y selectores avanzados cuando utilice hojas de estilo externas.

Con de hojas de estilo CSS externas

• Requiere una convención de nomenclatura fiable para garantizar que los estilos no se anulen.

Utilizar módulos CSS

Las aplicaciones React pueden ser realmente grandes. Los nombres de animación CSS y los nombres de clase son, por defecto, de ámbito global. Esta configuración puede ser problemática cuando se trata de hojas de estilo grandes, ya que un estilo puede anular a otro. 

Los módulos CSS resuelven este problema asignando localmente los nombres de las animaciones y las clases. Este enfoque garantiza que los nombres de clase sólo estén disponibles dentro del archivo/componente donde se necesitan. Cada nombre de clase recibe un nombre programático único, evitando conflictos. 

Para implementar los Módulos CSS, cree un archivo con .module.css. Si desea nombrar su hoja de estilo como style, el nombre del archivo será style.module.css. 

Importa el archivo creado en tu componente React, y estarás listo para empezar. 

Tu archivo CSS podría tener este aspecto;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

Puede importar el módulo CSS en su App.js de la siguiente manera;

importa { React } de "react";

import styles de "./styles.module.css";

function App() {

  devuelve (

    <h1 classname="{styles.heading}">Hola lector de Geekflare</h1>

  );

}

export default App;

Ventajas de utilizar módulos CSS

• Se integra fácilmente con SCSS y CSS
• Evita conflictos de nombres de clase

Contras del uso de módulos CSS

• Hacer referencia a nombres de clases utilizando módulos CSS puede resultar confuso para los principiantes. 

Utilizar Styled-Components

Los componentes con estilo permiten a los desarrolladores crear componentes utilizando CSS en código JavaScript. Un componente con estilo actúa como un componente React que viene con estilos. Los componentes con estilo ofrecen un estilo dinámico y nombres de clase únicos. 

Para empezar a utilizar Styled Components, puede instalar el paquete en su carpeta raíz utilizando este comando;

npm install styled-components

El siguiente paso es importar Styled Components a tu aplicación React

A continuación se muestra un fragmento de código de App.js que utiliza Styled Components;

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;

La aplicación renderizada tendrá los estilos anteriores importados de Styled Components. 

Ventajas de los componentes estilizados

• Es previsible. En este enfoque, los estilos se anidan en componentes individuales. 
• No hay necesidad de centrarse en las convenciones de nomenclatura de sus clases. Escriba sus estilos y el paquete se encargará del resto. 
• Puede exportar Styled Components como props. Styled Components convierte CSS normal en componentes React. Así puedes reutilizar este código, ampliar estilos mediante props y exportar. 

Contra de los componentes estilizados

• Tienes que instalar una biblioteca de terceros para empezar. 

Hojas de estilo sintácticamente asombrosas (SASS/ SCSS)

SASS viene con herramientas y características más potentes que faltan en el CSS normal. Puede escribir estilos en dos estilos diferentes guiados por estas extensiones; .scss y .sass. 

La sintaxis de SASS es similar a la del CSS habitual. Sin embargo, no necesita los corchetes de apertura y cierre al escribir reglas de estilo en SASS. 

Un simple fragmento de SASS aparecerá como sigue;

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

Para empezar a usar SASS en tu aplicación React, primero necesitas compilar SASS a CSS plano. Después de configurar tu aplicación mediante el comando Create React App, puedes instalar node-sass para que se encargue de la compilación. 

npm install node-sass

A continuación, puede crear sus archivos y darles extensiones .scss o .sass. A continuación, puede importar los archivos de la forma habitual. Por ejemplo;

import "./Components/App.sass";

Ventajas de SASS/SCSS

• Viene con muchas características dinámicas como mixins, anidamiento y extensión. 
• Con SASS/SCSS no hay que escribir mucho código CSS.

Contras de SASS/SCSS

• Los estilos son globales, por lo que puede encontrarse con problemas de anulación. 

¿Cuál es el mejor enfoque estilístico?

Como hemos hablado de cinco enfoques, querrá saber cuál es el mejor. Es difícil destacar al ganador absoluto en este debate. Sin embargo, estas consideraciones le ayudarán a tomar una decisión informada:

• Las métricas de rendimiento
• Tanto si necesita un sistema de diseño
• La facilidad de optimizar su código

El estilo en línea es adecuado cuando se tiene una aplicación sencilla con pocas líneas de código. Sin embargo, todos los demás; externos, SASS, Styled Components y CSS Modules, son adecuados para aplicaciones grandes. 

¿Cuáles son las mejores prácticas para mantener CSS en una aplicación React grande?

• Evite el estilo en línea. Escribir estilos CSS en línea para cada etiqueta en una aplicación React grande puede ser agotador. En su lugar, utiliza una hoja de estilos externa que se adapte a tus necesidades. 
• Deshilache su código. Linters como Stylelint resaltarán errores de estilo en tu código para que puedas corregirlos a tiempo. 
• Realice revisiones periódicas del código. Escribir CSS parece divertido, pero las revisiones periódicas del código facilitan la identificación temprana de errores. 
• Automatice las pruebas de sus archivos CSS. Enzyme y Jest son herramientas increíbles que puedes usar para automatizar pruebas en tu código CSS. 
• Mantenga su código DRY. cuando se trate de estilos de uso común, como colores y márgenes, utilice variables de utilidad y clases, ya que va con el principio Don't Repeat Yourself (DRY). 
• Utilice convenciones de nomenclatura como Modificador de elemento de bloque. Este enfoque facilita la escritura de clases CSS fáciles de entender y reutilizar. 

Conclusión 

Estas son algunas de las formas que puedes utilizar para dar estilo a React. La elección del enfoque de estilo dependerá de tus necesidades, habilidades y gustos. Incluso puedes combinar varios enfoques de estilo, como hojas de estilo en línea y externas, en tu aplicación React. 

También puede explorar algunas de las mejores Frameworks y bibliotecas CSS para desarrolladores frontales.