Published on

Cómo aplicar estilos en React: 5 formas de escribir CSS en 2022

Authors

tailwind-nextjs-banner

Cuando se trata de aplicar estilos a una aplicación React, tenemos un montón de opciones diferentes. ¿Cuál será la mejor, o la ideal?

He desglosado las 5 formas principales entre las que debes elegir al escribir CSS en tu aplicación React.

No existe una forma general y siempre perfecta de aplicar estilos CSS en React, cada proyecto es diferente y tiene necesidades diferentes.

Es por eso que al final de cada sección, cubriré los pros y los contras de cada enfoque para ayudarte a elegir cuál es la mejor para tus proyectos. ¡Empecemos!

Estilos en línea

Los estilos en línea son los más directos para diseñar cualquier aplicación React.

Diseñar elementos en línea no requiere crear una hoja de estilo separada. El estilo es aplicado directamente a los elementos.

Este es un ejemplo de un diseño con estilos en línea:

export default function App() {
  return (
    <section
      style={{
        fontFamily: '-apple-system',
        fontSize: "1rem",
        fontWeight: 1.5,
        lineHeight: 1.5,
        color: "#292b2c",
        backgroundColor: "#fff",
        padding: "0 2em"
      }}
    >
      <div
        style={{
          textAlign: "center",
          maxWidth: "950px",
          margin: "0 auto",
          border: "1px solid #e6e6e6",
          padding: "40px 25px",
          marginTop: "50px"
        }}
      >
        <img
          src="https://randomuser.me/api/portraits/women/48.jpg"
          alt="Eleonora Henny"
          style={{
            margin: "-90px auto 30px",
            width: "100px",
            borderRadius: "50%",
            objectFit: "cover",
            marginBottom: "0"
          }}
        />
        <div>
          <p
            style={{
              lineHeight: 1.5,
              fontWeight: 300,
              marginBottom: "25px",
              fontSize: "1.375rem"
            }}
          >
            ¡Este es uno de los mejores blogs de desarrolladores del planeta! Lo leo a diario para mejorar mis habilidades.
          </p>
        </div>
        <p
          style={{
            marginBottom: "0",
            fontWeight: 600,
            fontSize: "1rem"
          }}
        >
          Eleonora Henny
          <span style={{ fontWeight: 400 }}> · Desarrolladores Front End</span>
        </p>
      </div>
    </section>
  );
}

A pesar de algunos beneficios rápidos, los estilos en línea son solo una opción aceptable para aplicaciones muy pequeñas.

Las dificultades con los estilos en línea se hacen evidentes a medida que tu base de código crece aunque sea ligeramente.

Como muestra el ejemplo del código anterior, incluso un componente pequeño como este se vuelve muy voluminoso si todos los estilos están en línea.

Los estilos en línea carecen de una serie de características esenciales que cualquier hoja de estilo CSS simple podría proporcionar. Por ejemplo, no puede escribir animaciones, estilos para elementos anidados (es decir, todos los elementos secundarios, primer hijo, último hijo), pseudoclases (es decir, :hover) y pseudoelementos (::first línea) para nombrar unos pocos.

Si estás creando un prototipo de una aplicación, los estilos en línea son excelentes.

Sin embargo, a medida que avances en tu creación, deberás cambiar a otra opción de estilo CSS para obtener funciones básicas de CSS.

Pros:

  • La forma más rápida de escribir estilos
  • Bueno para la creación de prototipos (escribe estilos en línea y luego cambia a las hojas de estilo)
  • Tiene una gran preferencia (puede anular estilos de una hoja de estilo)

Contras:

  • Tedioso de convertir CSS simple a estilos en línea
  • Muchos estilos en línea hacen que JSX sea ilegible
  • No puedes usar funciones básicas de CSS como animaciones, selectores, etc.
  • No escala bien

CSS plano

En lugar de usar estilos en línea, es común importar una hoja de estilo CSS para diseñar los elementos de un componente.

Escribir CSS en una hoja de estilo es probablemente el enfoque más común y básico para diseñar una aplicación React, pero no debería descartarse tan fácilmente.

Los estilos de escritura en hojas de estilo CSS "simples" están mejorando todo el tiempo, debido a un conjunto cada vez mayor de funciones disponibles en el estándar CSS. Esto incluye funciones como variables CSS para almacenar valores dinámicos, todo tipo de selectores avanzados para seleccionar elementos secundarios con precisión y nuevas pseudoclases como :is y :where.

Aquí está nuestro ejemplo escrito en CSS simple e importado en la parte superior de nuestra aplicación React:

/* src/styles.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}
.example {
  margin: 0 auto;
  padding: 0 2em;
}
.example-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.example-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.example-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.example-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.example-name span {
  font-weight: 400;
}

// src/App.js

import "./styles.css";

export default function App() {
  return (
    <section className="example">
      <div className="example-wrapper">
        <img
          className="example-avatar"
          src="https://randomuser.me/api/portraits/women/48.jpg"
          alt="Eleonora Henny"
        />
        <div className="example-quote">
          <p>
            ¡Este es uno de los mejores blogs de desarrolladores del planeta! Lo leo a diario para mejorar mis habilidades.
          </p>
        </div>
        <p className="example-name">
          Eleonora Henny<span> · Front End Developer</span>
        </p>
      </div>
    </section>
  );
}

Para nuestro ejemplo, ten en cuenta que estamos creando clases para aplicar a cada elemento individual.

Todas estas clases comienzan con el mismo nombre example-. CSS escrito en una hoja de estilo es una excelente primera opción para tu aplicación.

A diferencia de los estilos en línea, puedes diseñar tu aplicación prácticamente de cualquier forma que necesites.

Un problema menor podría ser tu convención de nomenclatura. Una vez que tienes una aplicación muy bien desarrollada, se vuelve más difícil pensar en nombres de clase únicos para tus elementos, especialmente cuando tienes 5 divs envueltos uno dentro del otro. Si no tienes una convención de nomenclatura con la que confíes, puede ser fácil cometer errores, además de crear varias clases con el mismo nombre, lo que genera conflictos.

Además, escribir CSS normal puede ser más detallado y repetitivo que las herramientas más nuevas como SASS/SCSS. Como resultado, puede llevar un poco más de tiempo escribir tus estilos en CSS en comparación con una herramienta como SCSS o una biblioteca CSS-in-JS.

Además, es importante tener en cuenta que, dado que CSS se aplica en cascada a todos los elementos secundarios, si aplica una hoja de estilo CSS a un componente, no solo se limita a ese componente.

Si tienes confianza con CSS, definitivamente es una opción viable para diseñar cualquier aplicación React.

Dicho esto, hay una serie de bibliotecas de CSS que nos brindan todo el poder de CSS con menos código e incluyen muchas características adicionales que CSS nunca tendrá por sí solo (como estilos de ámbito y prefijo automático de proveedores).

Pros:

  • Nos brinda todas las herramientas del CSS moderno (variables, selectores avanzados, nuevas pseudoclases, etc.)
  • Nos ayuda a limpiar nuestros archivos de componentes de estilos en línea

Contras:

  • Necesitas configurar el prefijo del proveedor para garantizar que las funciones más recientes funcionen para todos los usuarios
  • Requiere más escritura y repetitivo que otras bibliotecas CSS (es decir, SASS)
  • Cualquier hoja de estilo se conecta en cascada al componente y a todos los elementos secundarios; sin alcance
  • Debes usar una convención de nomenclatura confiable para garantizar que los estilos no entren en conflicto

SASS / SCSS

¿Qué es SASS? SASS es un acrónimo que significa: hojas de estilo sintácticamente asombrosas.

SASS nos brinda algunas herramientas poderosas, muchas de las cuales no existen en las hojas de estilo CSS normales.

Incluye características como variables, estilos de extensión y anidamiento.

SASS nos permite escribir estilos en dos tipos diferentes de hojas de estilo, con las extensiones .scss y .sass.

Los estilos SCSS están escritos en una sintaxis similar a la del CSS normal, sin embargo, los estilos SASS no requieren que usemos corchetes de apertura y cierre al escribir reglas de estilo.

Aquí hay un ejemplo rápido de una hoja de estilo SCSS con algunos estilos anidados:

/* styles.scss */

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Compara esto con el mismo código escrito en una hoja de estilo SASS:

/* styles.sass */

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

Dado que este no es CSS normal, debe compilarse de SASS a CSS simple.

Para hacerlo en nuestros proyectos React, puedes usar una biblioteca como node-sass.

Si estás utilizando un proyecto Create React App, para comenzar a usar archivos .scss y .sass, puedes instalar node-sass con npm:

npm install node-sass

Aquí está nuestro ejemplo diseñado con SCSS:

/* src/styles.scss */

$font-stack: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$text-color: #292b2c;

%font-basic {
  font-size: 1rem;
}

body {
  @extend %font-basic;
  font-family: $font-stack;
  color: $text-color;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  background-color: #fff;
}

/* reglas sin cambios */

.example-name {
  @extend %font-basic;
  margin-bottom: 0;
  font-weight: 600;

  span {
    font-weight: 400;
  }
}

Estos estilos nos dan las siguientes características: variables, estilos extensibles y estilos anidados.

Variables: puedes usar valores dinámicos escribiendo variables, al igual que en JavaScript, declarándolas con un $ al principio.

Hay dos variables que se pueden usar en varias reglas: $font-stack, $text-color.

Extensión/herencia: puedes agregar reglas de estilo al extenderlas. Para ampliar las reglas, crea tu propio selector que se puede reutilizar como una variable. El nombre de las reglas que deseas extender comienza con %.

La variable %font-basic es heredada por las reglas del body y .example-name.

Anidamiento: en lugar de escribir varias reglas que comienzan con el mismo selector, puedes anidarlas.

En .example-name , usamos un selector anidado para apuntar al elemento de intervalo dentro de él.

Pros:

  • Incluye muchas características dinámicas de CSS como extensión, anidamiento y mixins
  • Los estilos CSS se pueden escribir con mucho menos repetitivo que CSS simple

Contras:

  • Al igual que el CSS simple, los estilos son globales y no se limitan a ningún componente.
  • Las hojas de estilo CSS están comenzando a incluir una serie de características que SASS tenía exclusivamente, como las variables CSS (no necesariamente una estafa, pero vale la pena señalar)
  • SASS/SCSS a menudo requiere configuración, como instalar la biblioteca Node node-sass

Módulos CSS

Los módulos CSS son otra ligera alternativa a algo como CSS o SASS.

Lo bueno de los módulos CSS es que se pueden usar con CSS normal o SASS. Además, si estás utilizando la aplicación Create React, puedes comenzar a usar módulos CSS sin ninguna configuración.

Aquí está nuestra aplicación escrita con módulos CSS:

/* src/styles.module.css */

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #292b2c;
  background-color: #fff;
}

/* styles skipped */

.example-name span {
  font-weight: 400;
}

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

export default function App() {
  return (
    <section className={styles.example}>
      <div className={styles['example-wrapper']}>
        <img
          src="https://randomuser.me/api/portraits/women/48.jpg"
          alt="Eleonora Henny"
          className={styles['example-avatar']}
        />
        <div>
          <p className={styles['example-quote']}>
            This is one of the best developer blogs on the planet! I read it
            daily to improve my skills.
          </p>
        </div>
        <p className={styles['example-name']}>
          Eleonora Henny
          <span> · Front End Developer</span>
        </p>
      </div>
    </section>
  );
}

Nuestro archivo CSS tiene el nombre .module antes de la extensión .css. Cualquier archivo de módulo CSS debe tener el nombre .module y terminar con la extensión apropiada (si estamos usando CSS o SASS/SCSS).

Lo que es interesante notar si observamos el código anterior es que los módulos CSS se escriben como CSS normal, pero se importan y usan como si se crearan como objetos (estilos en línea).

El beneficio de los módulos CSS es que ayuda a evitar problemas de conflictos de clases con CSS normal. Las propiedades a las que hacemos referencia se convierten en nombres de clase únicos que no pueden entrar en conflicto entre sí cuando se construye nuestro proyecto.

Nuestros elementos HTML generados se verán así:

<p class="_styles__example-name_309571057">
  Eleonora Henny
</p>

Además, los módulos CSS resuelven el problema del alcance global en CSS. En comparación con nuestras hojas de estilo CSS normales, el CSS declarado usando módulos para componentes individuales no se conectará en cascada a los componentes secundarios.

Por lo tanto, es mejor usar módulos CSS sobre CSS y SASS para asegurarse de que las clases no entren en conflicto y para escribir estilos predecibles que solo se aplican a uno u otro componente.

Pros:

  • Los estilos están en el ámbito de uno u otro componente (a diferencia de CSS / SASS)
  • Los nombres de clase únicos y generados garantizan que no haya conflictos de estilo
  • Puedes usarlos inmediatamente sin configuración en proyectos CRA
  • Se puede usar con SASS/CSS

Contras:

  • Puede ser complicado hacer referencia a los nombres de clase
  • Puede ser una curva de aprendizaje usar estilos CSS como propiedades de objetos

CSS-in-JS

Similar a cómo React nos permitió escribir HTML como JavaScript con JSX, CSS-in-JS ha hecho algo similar con CSS.

CSS-in-JS nos permite escribir estilos CSS directamente en los archivos javascript (.js) de nuestros componentes.

No solo te permite escribir reglas de estilo CSS sin tener que crear un solo archivo .css, sino que estos estilos se limitan a componentes individuales.

En otras palabras, puedes agregar, cambiar o eliminar CSS sin sorpresas. Cambiar los estilos de un componente no afectará los estilos del resto de su aplicación.

CSS-in-JS a menudo hace uso de un tipo especial de función de JavaScript llamada literal de plantilla etiquetada. ¡Lo bueno de esto es que aún podemos escribir reglas de estilo CSS simples directamente en nuestro JS!

Aquí hay un ejemplo rápido de una biblioteca CSS-in-JS popular, Componentes con estilo:

import styled from "styled-components";

const Button = styled.button`
  color: limegreen;
  border: 2px solid limegreen;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  &:hover {
    opacity: 0.9;
  }
`;

export default function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Ten en cuenta algunas cosas aquí:

  1. Puedes escribir estilos CSS normales, pero puedes incluir estilos anidados y pseudoclases (como el desplazamiento).
  2. Puedes asociar estilos con cualquier elemento HTML válido, como el elemento de botón anterior (consulta styled.button).
  3. Puedes crear nuevos componentes con estos estilos asociados. Mira cómo se usa Button en nuestro componente de aplicación.

Dado que este es un componente, ¿se le pueden pasar props? ¡Sí! Podemos exportar este componente y usarlo en cualquier parte de nuestra aplicación que queramos, además de darle características dinámicas a través de props.

Digamos que deseas una variante invertida del botón de arriba con un fondo y texto invertidos. No hay problema.

Pasa la prop inverted a nuestro segundo botón y en Button, puedes acceder a todas las props pasadas ​​al componente usando la sintaxis ${} con una función interna.

import styled from "styled-components";

const Button = styled.button`
  background: ${props => props.inverted ? "limegreen" : "white"};
  color: ${props => props.inverted ? "white" : "limegreen"};
  border: 2px solid limegreen;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  &:hover {
    opacity: 0.9;
  }
`;

export default function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Button inverted>Click me</Button>
    </div>
  );
}

En el retorno de la función, puede seleccionar la prop inverted y usar un ternario para determinar condicionalmente el color del fondo y el texto.

Hay muchos más beneficios al usar una biblioteca CSS-in-JS para diseñar sus aplicaciones React (demasiados para cubrir aquí), algunos de los cuales enumeraré a continuación.

Asegúrate de consultar las dos bibliotecas CSS-in-JS más populares para React: Emotion y Styled Components.

Una desventaja de usar bibliotecas CSS-in-JS es agregar una biblioteca adicional a tu proyecto. Sin embargo, diría que esto vale fácilmente la experiencia de desarrollador mejorada que tienes al diseñar tus aplicaciones React en lugar de CSS simple.

Pros:

  • CSS-in-JS es predecible: los estilos se limitan a componentes individuales
  • Dado que nuestro CSS ahora es JS, podemos exportar, reutilizar e incluso extender nuestros estilos a través de props.
  • Las bibliotecas CSS-in-JS aseguran que no haya conflictos de estilo al generar nombres de clase únicos para tus estilos escritos
  • No es necesario centrarse en las convenciones de nomenclatura de tus clases, ¡simplemente escribe estilos!

Contras:

  • A diferencia del CSS simple, deberás instalar una o más bibliotecas de JavaScript de terceros, lo que agregará peso a tu proyecto construido.

Conclusión

Ten en cuenta que no incluí bibliotecas de componentes en esta comparación. Quería centrarme principalmente en las diferentes formas en las que tú mismo puedes componer estilos.

Ten en cuenta que elegir una biblioteca con componentes y estilos prefabricados como Material UI o Ant Design (por nombrar algunos) es una opción totalmente válida para tu proyecto.

Espero que esta guía te haya dado una buena comprensión de cómo diseñar tus aplicaciones React junto con qué enfoque elegir para tu próximo proyecto.

Ver en GitHub