Cómo dar estilo a tus aplicaciones React con CSS como un profesional

Original article: https://www.freecodecamp.org/news/style-react-apps-with-css/

React es una biblioteca de JavaScript para construir interfaces de usuario. Y ha ganado mucha popularidad en la comunidad del desarrollo front-end.

Uno de los beneficios de usar React es su integración con CSS, lo que permite a los desarrolladores aplicar estilos a sus componentes de una manera modular y reutilizable.

En este tutorial aprenderás cómo integrar React con CSS como un profesional al entender las distintas maneras que puedes aplicar estilos a tus componentes. También aprenderás algunas buenas prácticas para la organización y mantenimiento de tu código CSS.

Al finalizar este tutorial deberías poder darle estilo a tus componentes React con confianza y construir interfaces de usuarios visualmente atractivas.

Lo que vas a aprender

Aquí hay algunas cosas que aprenderás:

• Cómo usar módulos de CSS para aplicar estilos de ámbito a los componentes
• Cómo usar bibliotecas CSS en JS tales como styled-components para dar estilo a tus componentes
• Cómo aplicar estilos adaptables a tus componentes utilizando media queries (en español "consultas de medios")  y otras técnicas de diseño adaptable
• Cómo usar animaciones y transiciones CSS para agregar efectos visuales dinámicos a tus componentes
• Buenas prácticas para la organización y mantenimiento de tu CSS cuando trabajas con una aplicación de React grande.

Cómo integrar React con CSS

Existen varias maneras de integrar React con CSS. Aquí hay algunas aproximaciones que puedes encontrar útiles:

Usar estilos en línea

Puedes usar el atributo style en tus componentes React para especificar estilos in línea. Esto puede ser conveniente si sólo necesitas aplicar pocos estilos a un único elemento.

import React from 'react';

function MiComponente() {
  return (
    <div style={{color: 'red', fontSize: '32px'}}>
      Este texto es rojo y 32px
    </div>
  );
}

Esto es un componente funcional en React que retorna un único elemento div con estilos en línea. El estilo en línea establece el color del texto a rojo y el tamaño de la fuente en 32px. Cuando este componente es renderizado en una aplicación React, mostrará un texto rojo con tamaño de fuente 32px como puedes ver en este CodePen.

Usando un archivo CSS

Puedes crear un archivo CSS e importarlo a tus componentes React. Esto es útil si tienes un conjunto de estilos que quieres reutilizar a través de múltiples componentes.

/* mis-estilos.css */
.texto-rojo {
  color: red;
}

.texto-grande {
  font-size: 32px;
}

Éste es un archivo CSS que contiene dos selectores de clase, .texto-rojo y .texto-grande, los cuales se pueden utilizar para aplicar los estilos correspondientes a los elementos. La clase .texto-rojo establece el color del texto a rojo y la clase .texto- grande establece el tamaño de fuente a 32px.

Para usar estas clases en JSX necesitas importar el archivo de hoja de estilo en el archivo del componente y luego agregar el className a los elementos JSX:

import React from 'react';
import './mis-estilos.css';

function MiComponente() {
  return (
    <div className="texto-rojo texto-grande">
      Este texto es rojo y 32px
    </div>
  );
}

Echa un vistazo al código en Codepen.

Usando un preprocesador de CSS

Puedes usar un preprocesador de CSS (como SASS o LESS) para escribir y organizar tus estilos. Esto puede ser conveniente  si quieres usar características como variables, mixins, y selectores anidados en tus estilos.

/* mis-estilos.scss */
$rojo: red;

.text-rojo {
  color: $red;
}

.texto-grande {
  font-size: 32px;
}

Este es un archivo SCSS (Sass) que usa variables para guardar valores de colores, el cual puede ser reutilizado en toda la hoja de estilo. Se establece la variable $rojo al valor de red, y luego es usada para establecer el color del texto de la clase .texto-rojo. Además de esto, la clase .texto-grande establece el tamaño de fuente a 32px.

import React from 'react';
import './mis-estilos.scss';

function MiComponente() {
  return (
    <div className="texto-rojo texto-grande">
      Este texto es rojo y 32px
    </div>
  );
}

Este es un componente funcional React que importa el archivo mis-estilos.scss y utiliza los selectores de clase definidos en ese archivo para dar estilo a los elementos en el JSX. La sentencia import en la parte superior del archivo es usada para importar el archivo mis-estilos.scss dentro del componente, permitiendo al componente usar las clases CSS definidas en ese archivo.

El JSX dentro de la función MiComponente retorna un único elemento div con el nombre de clase (className) texto-rojo texto-grande. Esto significa que el elemento div tendrá ambos estilos de clases .texto-rojo y .texto-grande que fueron definidas en el archivo mis-estilos.scss, dando como resultado el texto dentro del div que sea rojo y de tamaño 32px.

Cuando este componente es renderizado por la aplicación React, mostrará un texto rojo con tamaño de fuente 32px. Puedes ver el código funcionando aquí.

Usando una biblioteca CSS en JS

También hay varias bibliotecas que te permiten componer tus estilos en JavaScript y aplicarlos a tus componentes.

Esto puede ser conveniente si quieres generar estilos de manera dinámica o aprovechar las características como tematización. Algunas bibliotecas populares de CSS en JS son styled-components y emotion.

import React from 'react';
import styled from 'styled-components';

const TextoRojo = styled.div`
  color: red;
  font-size: 32px;
`;

function MiComponente() {
  return (
    <TextoRojo>
      Este texto es rojo y 32px
    </TextoRojo>
  );
}

Este es un componente funcional React que usar la biblioteca "styled-components" para dar estilo los elementos JSX. La biblioteca styled-components te permite escribir código CSS para darle estilo a tus componentes de una manera que tiene alcance a ese componente. También te permite usar expresiones JavaScript en tu CSS.

Aquí el componente importa el objeto styled desde la biblioteca styled-components y crea un nuevo componente llamado TextoRojo que renderiza un elemento div con los estilos definidos dentro de las comillas invertidas. Los estilos definidos dentro de las comillas invertidas establecen el color de text a rojo y el tamaño de fuente en 32px.

Luego el componente retorna JSX que usa el componente TextoRojo, el cual muestra un div con los estilos definidos.

Cuando este componente es renderizado por la aplicación React, se mostrará un texto rojo con tamaño de fuente 32px.

Éste método de dar estilo te permite crear componentes independientes reutilizables, con sus propios estilos que son fácil de manejar y probar.

Cómo usar animaciones y transiciones CSS para agregar efectos visuales dinámicos a tus componentes

Para usar animaciones y transiciones CSS en un componente React vas a necesitar usar un objeto de estilo o una hoja de estilos externa para definir los estilos para tu componente.

Aquí hay un ejemplo de cómo usar una hoja de estilos para definir una animación CSS simple que desdibuja un elemento cuando es montado:

import React, { useEffect } from 'react';

function FadeInElement() {
  const [fadeIn, setFadeIn] = useState(false);

  useEffect(() => {
    setFadeIn(true);
  }, []);

  const fadeInStyle = {
    opacity: fadeIn ? 1 : 0,
    transition: 'opacity 500ms linear'
  };

  return <div style={fadeInStyle}>Fade In Element</div>;
}

Este es un componente funcional React que usar los Hooks de React para crear una simple animación que "desdibuja" un elemento en la pantalla.

El componente usa el hook useState para manejar el estado del componente, en este caso es un valor booleano que determina si el elemento debe o no estar visible.

El componente también usa el hook useEffect para escuchar los cambios en el componente y establece el estado fadeIn a verdadero cuando el componente es renderizado. El useEffect toma un arreglo vacío como segundo argumento, esto significa que sólo va a ejecutarse una vez cuando el componente se renderiza por primera vez (en el montaje).

El componente luego define un objeto fadeInStyle que usa el estado fadeIn para establecer la opacidad del elemento. Si fadeIn es verdadero, el elemento será completamente opaco (opacidad: 1), de lo contrario será completamente transparente (opacidad: 0). La propiedad "transition" también se establece para hacer una transición suave a lo largo de 500ms.

El componente retorna un elemento div con el objeto fadeInStyle como su estilo en línea. Cuando este componente es renderizado por una aplicación React, mostrará el texto "Fade In Element" que se dibuja suavemente a lo largo de un periodo de 500ms. Puedes ver el código funcionando aquí.

También puedes usar la prop className y una hoja de estilos externa para definir tus estilos. Aquí hay un ejemplo que usa una hoja de estilos externa para definir una transición CSS simple que cambia el color de un elemento cuando se le pasa el mouse por encima:

import React from 'react';
import './FadeInElement.css';

function FadeInElement() {
  return <div className="fade-in-element">Hover Me</div>;
}

.fade-in-element {
  transition: color 500ms linear;
}

.fade-in-element:hover {
  color: blue;
}

También puedes usar la regla @keyframes para determinar animaciones más complejas. Por ejemplo:

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 500ms linear;
}

También puedes aplicar la animación pulse a un elemento usando la prop className:

import React from 'react';
import './PulseElement.css';

function PulseElement() {
  return <div className="pulse">Pulse</div>;
}

Mejores prácticas para la organización y mantener tu CSS en una aplicación React grande

Usar una biblioteca CSS en JS

Bibliotecas CSS en JS como styled-components y emotion te permiten definir tus estilos en JavaScript y automáticamente colocarlos en el ámbito de tus componentes tal como se muestra arriba. Esto puede ayudar a prever conflictos de nombres y hacer que sea más fácil manejar tus estilos.

Usar convención de nomenclatura

Es una buena idea usar una convención de nomenclatura consistente para tus clases CSS para mantener tus estilos organizados y fácil de entender. Algunas convenciones de nomenclatura populares son BEM (Bloque-Elemento-Modificador) y SMACSS (Arquitectura Escalable y Modular para CSS).

Aquí hay un ejemplo de cómo éstas convenciones puede ser usadas juntas en un componente React:

import React from 'react';
import './ProfileInfo.css';

function ProfileInfo(props) {
  return (
    <div className="profile-info">
      <h2>{props.name}</h2>
      <p>{props.bio}</p>
    </div>
  );
}

export default ProfileInfo;

Y el correspondiente CSS:

.profile-info {
  background-color: #f5f5f5;
  padding: 20px;
}

En este código se usan las siguientes convenciones de nomenclatura:

• El componente funcional React se llama "ProfileInfo", lo que sigue la convención de nomenclatura UpperCamelCase (caso de camellos superior) o PascalCase para nombrar componentes de React.
• El archivo CSS importado se llama "ProfileInfo.css", lo que también sigue la convención UpperCamelCase y coincide con el nombre del componente.
• La clase en la plantilla JSX se llama "profile-info", lo que sigue la convención minúscula y separado por guiones, también conocida como kebab-case, para nombrar clases CSS.

Puedes leer más sobre convenciones de nomenclatura aquí si lo deseas.

Usar una herramienta de tipo linter

Una herramienta de tipo linter es una herramienta que verifica tu código para detectar errores de estilo y sintáxis. Existen linters disponibles para CSS que te pueden ayudar a mantener tus estilos consistente y libre de errores.

Existen varios linters disponibles para verificar tu código CSS, tales como CSSLint, Styleline y ESLint.

Para usar un linter en CSS primero necesitas instalarlo. Por ejemplo, para instalar CSSLint, puedes usar npm ejecutando el siguiente comando:

npm list -g csslint

Una vez que se instala la herramienta linter, puedes usarla para verificar tu código CSS ejecutando el linter y pasando el archivo o archivos que quieres verificar como argumentos.

Por ejemplo, para verificar un archivo llamado "estilos.css" usando CSSLint, vas a necesitar cambiar tu directorio a la carpeta con el archivo CSS y luego ejecutar el siguiente comando:

csslint estilos.css

Después de ejecutar el comando de arriba vas a ver lo siguiente de acuerdo a los errores en tu código:

También puedes configurar el linter para usar reglas y configuraciones específicas al crear un archivo de configuración. El formato del archivo de configuración depende de la herramienta linter que estés usando. Por ejemplo, CSSLint usa un archivo .csslintrc.

Una vez que ejecutas el linter, éste va a imprimir por pantalla cualquier problema o advertencia que encuentra en tu código CSS. Luego puedes revisar la salida en pantalla y corregir cualquier problema que fue encontrado.

Nota: Dependiendo de la herramienta linter que estés usando, el proceso puede variar. Pero el concepto básico es el mismo.

Dividir tus estilos en archivos separados

A medida que tu proyecto crezca puede ser útil dividir tus estilos en archivos separados, como un archivo para estilos base, uno para estilos de maquetación, y una para estilos temáticos. Esto puede facilitar encontrar y mantener tus estilos.

Usar control de versiones

Usando un sistema de control de versiones como Git para realizar un seguimiento de los cambios en tus archivos CSS puede facilitar la colaboración con otros miembros del equipo y también revertir cambios si algo sale mal.

Usar un preprocesador CSS

Un preprocesador CSS como SASS y LESS te pueden ayudar a escribir y mantener tus estilos más eficientemente tal como se muestra abajo. Ellos te permiten usar variables, funciones y otras características que no están disponibles en CSS común.

Conclusión

Integrar React con CSS puede ser una herramienta poderosa para construir aplicaciones web eficientes y elegantes.

Al entender los principios del framework React y cómo interactúa con CSS, vas a poder aprovechar las fortalezas de ambas tecnologías y crear interfaces de usuario dinámicas y expresivas.

Tanto si eres un desarrollador experimentado como si acabas de empezar con React, aprender a integrar CSS de forma eficaz puede llevar tus habilidades al siguiente nivel y ayudarte a crear aplicaciones realmente impresionantes.