5 formas de reaccionar con estilo usando CSS [2023]

¿Sabías que más del 97 % de los sitios web usan CSS para diseñar?

Hojas de estilo en cascada, o CO, permite 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 simplicidad de crear, ejecutar y mantener una aplicación React es la razón principal detrás de su popularidad. React es una biblioteca de JavaScript en lugar de un marco, que ofrece más que solo 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 JavaScript y bibliotecas.

Diseñar en React es el proceso de hacer que varios componentes en una aplicación React sean visualmente atractivos usando CSS. Sin embargo, vale la pena señalar que React usa 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 JSX usa .ClassName para denotar lo mismo.

¿Por qué debería diseñar React usando CSS?

Haz que tu aplicación sea responsiva. Las aplicaciones web modernas deben ser accesibles tanto en pantallas pequeñas como grandes. CSS le permite aplicar consultas de medios a su aplicación React y hacer que responda a diferentes tamaños de pantalla.
Acelerar el proceso de desarrollo. Puede usar la misma regla CSS en varios componentes de su aplicación React.
Haga que la aplicación React sea mantenible. Hacer cambios de apariencia a componentes/partes específicas de su aplicación es fácil usando 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 usar.

Hay varios enfoques que los desarrolladores pueden usar para diseñar sus aplicaciones React. Los siguientes son algunos de los más comunes;

Write Inline Styles

Los estilos en línea son el enfoque más fácil para diseñar una aplicación React, ya que los usuarios no necesitan crear una hoja de estilo externa. El estilo CSS se aplica directamente al código React.

Vale la pena señalar que los estilos en línea tienen una gran prioridad sobre otros estilos. Por lo tanto, si tuviera una hoja de estilo externa con algún formato, el estilo en línea la anularía.

Esta es una demostración del 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"}}>Hello World!!!!!</h1>

      <h2>Add a little style!</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 enfoque más simple, ya que agrega estilo directamente a la etiqueta que desea diseñar.
Tiene gran preferencia. Los estilos en línea anulan las hojas de estilo externas. Por lo tanto, puede usarlo para concentrarse en una funcionalidad particular sin cambiar toda la aplicación.
Impresionante para la creación de prototipos. Puede usar 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. Diseñar cada etiqueta directamente lleva mucho tiempo.
Limitado. No puede usar funciones CSS como selectores y animaciones con estilos en línea.
Muchos estilos en línea hacen que el código JSX sea ilegible.

Importing External Stylesheets

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

Para lograr esto, debe crear un archivo CSS en el directorio de su aplicación, importarlo a su componente de destino y escribir reglas de estilo para su aplicación.

Para demostrar cómo funcionan las hojas de estilo CSS externas, puede crear una Archivo CSS y asígnele el nombre App.css. A continuación, puede exportarlo de la siguiente manera.

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

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

Ventajas de las hojas de estilo CSS externas

Reutilizable. Puede usar las mismas reglas CSS en diferentes componentes en una aplicación React.
Hace que el código sea más presentable. Comprender el código es fácil cuando se usan hojas de estilo externas.
Da acceso a funciones CSS avanzadas. Puede usar pseudoclases y selectores avanzados al usar hojas de estilo externas.

Estafa de hojas de estilo CSS externas

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

Use CSS Modules

Las aplicaciones React pueden volverse realmente grandes. Los nombres de las animaciones CSS y los nombres de las clases tienen, de forma predeterminada, un alcance 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 desafío analizando localmente la animación y los nombres de las clases. Este enfoque garantiza que los nombres de clase solo estén disponibles dentro del archivo/componente donde se necesitan. Cada nombre de clase recibe un nombre programático único, lo que evita conflictos.

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

Importe el archivo creado en su componente React y estará listo para comenzar.

Su archivo CSS podría verse así;

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

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

import { React } from "react";

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

function App() {

  return (

    <h1 className={styles.heading}>Hello Geekflare reader</h1>

  );

}

export default App;

Ventajas de usar módulos CSS

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

Contras de usar módulos CSS

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

Use Styled-Components

Los componentes con estilo permiten a los desarrolladores crear componentes usando 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 comenzar a usar Componentes con estilo, puede instalar el paquete en su carpeta raíz usando este comando;

npm install styled-components

El siguiente paso es importar componentes con estilo a su aplicación React

El siguiente es un fragmento de código de App.js que usa componentes con estilo;

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 Componentes con estilo.

Ventajas de los componentes con estilo

es predecible. Los estilos en este enfoque de estilo están anidados en componentes individuales.
No es necesario centrarse en las convenciones de nomenclatura de sus clases. Simplemente escriba sus estilos y el paquete se encargará del resto.
Puede exportar componentes con estilo como accesorios. Los componentes con estilo convierten CSS normal en componentes React. Por lo tanto, puede reutilizar este código, extender estilos a través de accesorios y exportar.

Contras de componentes con estilo

Debe instalar una biblioteca de terceros para comenzar.

Syntactically Awesome Style Sheets (SASS/ SCSS)

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

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

Aparecerá un fragmento simple de SASS de la siguiente manera;

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

Para comenzar a usar SASS en su aplicación React, primero debe compilar SASS en CSS simple. Después de configurar su aplicación a través del comando Create React App, puede instalar node-sass para encargarse de la compilación.

npm install node-sass

Luego puede crear sus archivos y darles extensiones .scss o .sass. A continuación, puede importar sus 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.
No necesitas mucho repetitivo para escribir código CSS cuando usas SASS/SCSS

Contras de SASS/SCSS

Los estilos son globales y, por lo tanto, puede encontrarse con problemas primordiales.

¿Cuál es el mejor enfoque de estilo?

Ya que hemos discutido cinco enfoques, desea saber cuál es el mejor. Es difícil destacar al ganador absoluto en esta discusión. Sin embargo, estas consideraciones lo ayudarán a tomar una decisión informada:

Las métricas de rendimiento
Si necesitas un sistema de diseño
La facilidad de optimizar tu código

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

¿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, utilice una hoja de estilo externa que se adapte a sus necesidades.
Lintea tu código. Linters como Stylelint resaltarán los errores de estilo en su código para que pueda corregirlos antes.
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 en sus archivos CSS. Enzyme y Jest son herramientas increíbles que puede usar para automatizar pruebas en su código CSS.
Mantenga su código SECO. cuando trabaje con estilos de uso común, como colores y márgenes, use variables y clases de utilidad según el principio No se repita (DRY).
Utilice convenciones de nomenclatura como Modificador de elemento de bloque. Tal enfoque facilita la escritura de clases CSS que son fáciles de entender y reutilizar.

Conclusión

Arriba hay algunas de las formas que puede usar para diseñar React. La elección del enfoque de estilo dependerá de sus necesidades, habilidades y gustos. Incluso puede combinar varios enfoques de estilo, como hojas de estilo en línea y externas, en su aplicación React.

También puede explorar algunas de las mejores Marcos y bibliotecas CSS para desarrolladores front-end.