Cuando trabajamos en aplicaciones desarrolladas con React, el manejo de estilos es crucial para lograr un diseño limpio, mantenible y escalable. Con la flexibilidad que ofrece React, existen múltiples enfoques para aplicar estilos a los componentes, desde hojas de estilo externas hasta la integración de preprocesadores como SASS y estilos en línea dentro de JSX.
En este artículo desarrollaré en detalle las diferentes opciones de estilización en React. Explicaré cómo pensar los estilos para una aplicación React moderna. Brindaré algunas recomendaciones para proyectos y también una guía con buenas prácticas.
Usar hojas de estilos externas
El enfoque más tradicional y uno de los más utilizados en aplicaciones React es la hoja de estilos externa. Este método implica crear un archivo CSS separado que se importa en los componentes de React. Por ejemplo:
/* styles.css */
/* Definimos los estilos para los contenedor por medio de una clase */
.container {
background-color: #f5f5f5;
padding: 20px;
}
/* Definimos los estilos de los botones */
.button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}Luego, cuando creamos el archivo para nuestro componente, podremos importar esta hoja de estilos de la siguiente manera
import './styles.css';
const App = () => {
return (
<div className="container">
<button className="button">Click Me</button>
</div>
);
};Este enfoque mantiene los estilos separados del código, lo que facilita la reutilización y el mantenimiento de los estilos. Sin embargo, cuando se trabaja en aplicaciones grandes, es importante tener en cuenta la organización de los estilos para evitar el «estilo global» que podría generar conflictos.
La alternativa de implementar estilos con SASS en nuestro proyecto
SASS es un preprocesador CSS que añade características poderosas como variables, anidación, mixins y herencia. En una aplicación React, SASS mejora la mantenibilidad de los estilos, especialmente en proyectos grandes. Para utilizar SASS en React, primero necesitamos instalarlo en nuestro proyecto de React. Esto podemos hacerlo mediante npm, yarn o la herramienta que utilicemos para gestionar paquetes.
Luego podremos crear archivos .scss para trabajar con los estilos. A continuación veremos un ejemplo de código SASS, equivalente a los estilos vistos anteriormente en CSS:
/* styles.scss */
$primary-color: #3498db;
.container {
background-color: #f5f5f5;
padding: 20px;
.button {
background-color: $primary-color;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
}Para importar el archivo de estilos creado en nuestro componente lo podremos hacer de la siguiente manera:
import './styles.scss';
const App = () => {
return (
<div className="container">
<button className="button">Click Me</button>
</div>
);
};SASS es útil para evitar la duplicación de código en CSS, gracias a sus mixins y variables. Para aplicaciones complejas, su uso mejora la eficiencia y la legibilidad del código.
Manejo de estilos con JSX
React también permite aplicar estilos directamente a los elementos a través del atributo style, el cual acepta un objeto JavaScript con propiedades CSS. Este enfoque es útil para aplicar estilos dinámicos o condicionales:
const App = () => {
const buttonStyle = {
backgroundColor: 'blue',
color: 'white',
padding: '10px 20px',
borderRadius: '5px',
border: 'none',
cursor: 'pointer'
};
return (
<div style={{ padding: '20px' }}>
<button style={buttonStyle}>Click Me</button>
</div>
);
};En este caso, cada propiedad CSS debe estar en camelCase en lugar de la notación tradicional de guiones (por ejemplo, backgroundColor en lugar de background-color). Esta técnica es ideal para estilos dinámicos o cuando los estilos dependen del estado de la aplicación, pero puede volverse difícil de gestionar en proyectos grandes si se abusa de su uso.
Estilos dinámicos con condicionales
Una de las ventajas de usar JSX es la posibilidad de generar estilos dinámicamente en función del estado o las props:
const App = () => {
const [isActive, setIsActive] = React.useState(false);
const buttonStyle = {
backgroundColor: isActive ? 'green' : 'red',
color: 'white',
padding: '10px 20px',
borderRadius: '5px',
border: 'none',
cursor: 'pointer'
};
return (
<div>
<button style={buttonStyle} onClick={() => setIsActive(!isActive)}>
{isActive ? 'Activo' : 'Inactivo'}
</button>
</div>
);
};Como podemos apreciar, este enfoque resulta muy útil cuando los estilos de un componente dependen de su estado.
Pensar los estilos para una App de React
Cuando diseñamos la arquitectura de los estilos en una aplicación React, es crucial considerar la escalabilidad y la facilidad de mantenimiento. Aquí hay algunas pautas que suelo brindar en mis consultorías y capacitaciones:
- Modularidad. Es muy importante comprender que React promueve la idea de componentes modulares. Por esta razón resulta buena práctica crear archivos de estilos específicos para cada componente. Si estamos usando SASS, una estructura de carpetas organizada es fundamental. Una convención es agrupar los estilos en módulos o por funcionalidad.
- Evitar estilos globales. En mis clases siempre recomiendo limitar el uso de estilos globales para evitar conflictos. Con React, es posible importar estilos directamente en componentes, lo que limita el alcance de esos estilos únicamente a ese componente.
- Estilos dinámicos y condicionales. Debemos aprovechar el poder de JSX para aplicar estilos condicionalmente, pero también debemos evitar sobrecargar el código del componente con demasiados estilos en línea. El equilibrio es la clave. Si los estilos dinámicos son complejos, debemos considerar moverlos a una hoja de estilos y gestionarlos con clases condicionales.
Recomendaciones y buenas prácticas
A continuación veremos cuatro recomendaciones que nos ayudarán a lograr una aplicación bien estructurada y escalable:
- Tener siempre presente que SASS nos permite mantener hojas de estilos limpias y fáciles de gestionar. Esto es más notorio en proyectos de gran escala.
- Para evitar conflictos de nombres en los estilos, CSS Modules es una opción excelente. Permite escribir estilos a nivel de componente con la seguridad de que no interferirán con otros.
- Si pensamos en prolijidad, escala y trabajo en equipo, mantener los estilos separados del componente, cuando sea posible, es una muy buena práctica. Si bien aplicar estilos en línea puede ser útil para cambios rápidos o estilos dinámicos, en general es más mantenible separar los estilos en archivos CSS o SASS.
- Evitar la sobrecarga de clases dinámicas beneficia la legibilidad y mantenibilidad del proyecto. Si bien es tentador manejar muchas clases de manera dinámica en JSX, esto puede dificultar la lectura del código. Si necesitamos aplicar múltiples clases condicionales, es posible considerar herramientas o bibliotecas adicionales que nos ayuden en esta tarea.
Estilos con React: en conclusión
Como hemos podido ver en este artículo, React proporciona flexibilidad en la manera de manejar los estilos en una aplicación. Desde hojas de estilos externas hasta soluciones avanzadas como SASS o estilos manejados en JSX. Lo más importante es elegir la estrategia que mejor se adapte a cada aspecto de nuestros proyectos. Mantener la modularidad y seguir las buenas prácticas para evitar que los estilos se vuelvan inmanejables a medida que la aplicación crece.
En mis capacitaciones, cuando abordamos este tema, siempre recomiendo un análisis general del proyecto y destaco la importancia de garantizar que los estilos sean mantenibles, escalables y fáciles de leer para todo el equipo de desarrollo.
Para conocer más sobre estas características se puede consultar la documentación disponible en el sitio: https://react.dev/.
Si te interesa capacitarte en React, enviame un mensaje.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta