CSS Modules en React

Autor: | Última modificación: 7 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

¿Conoces CSS Modules en React? Estilizar es una parte fundamental en cualquier proyecto de programación. En especial en el mundo del desarrollo web, donde no basta con que los objetos sean útiles, también tienen que ser diferentes y utilizables. Dar estilo a un elemento no solo nos da un sentido estético, también comunica claves al usuario sobre cómo se puede usar y guía su experiencia.

Por ello, existen muchas maneras de dar estilo. En este post, te enseñaremos qué son y cómo funcionan los CSS Modules en React, una de las formas que tiene esta librería para estilizar nuestras aplicaciones.

¿Qué son CSS Modules en React?

Los CSS Modules en React son una herramienta a la que tenemos acceso cuando creamos aplicaciones usando create-react-app. En realidad, podemos acceder a esta herramienta utilizando webPack. Sin embargo, cuando creamos una aplicación usando create-react-app, esta herramienta se encarga de configurar webPack de manera interna para que podamos ejecutar muchas acciones. Como puedes leer en nuestro post sobre cargar CSS desde un componente React, webPack se encarga de facilitar la conexión entre archivos y dependencias.

Entonces, CSS Modules en React es una forma de aplicar estilos en los componentes de esta librería de JavaScript. Con webPack tenemos acceso no solo a CSS Modules, sino también a Sass y post-css, que son todas herramientas para estilizar nuestras aplicaciones.

Para conocer cómo trabajar con las distintas formas de estilizar que nos proporciona create-react-app, te sugerimos leer la sección de Styles and Assets en la página oficial de create-react-app-dev.

¿Cómo funcionan CSS Modules?

Como la práctica es la mejor enseñanza, para enseñarte cómo funcionan los CSS Modules, veremos un ejemplo. Los CSS Modules en React nos permiten establecer que, si tenemos un archivo que termina en la extensión module.css, podemos importar este archivo de estilos para aplicarlos en nuestro código JavaScript.

Entonces, supongamos que queremos estilizar un componente con el nombre de clase tweetsPage. Para usar los CSS Modules en React, creamos un nuevo archivo que se titule TweetsPage.module.css. En este archivo podemos insertar cualquier propiedad de estilo CSS llamando al nombre de clase e insertando las propiedades en términos de clave:valor.

.tweetsPage {

color:green;

}

Entonces, como hemos creado un archivo con la extensión module, debemos importarlo en el archivo de nuestro componente de la siguiente manera:

import styles from ‘./TweetsPage.module.css’;

Nota que, a diferencia de cuando importamos un CSS directamente, debemos importar la palabra clave styles.

¿Qué nos da esta palabra clave? Veámoslo usando el comando console.log. Si escribes console.log (styles) y vas al inspector de tu navegador, verás que lo que recibimos es un objeto con la clase tweetsPage y un string. Este string se compone del nombre del archivo, el nombre de la clase y un código hash que lo identifica de manera única. Por ejemplo:

tweetsPage: «TweetsPage_tweetsPage_U3B1a»

Para aplicar el estilo declarado con los CSS Modules en React, nos dirigimos a nuestro componente original. Allí, en vez de pasarle la clase usando className= «tweetsPage», usaremos la palabra clave styles. Entonces, la declaración de la clase quedaría de la siguiente manera:

className = {style.tweetsPage}

Con la línea de código anterior, hemos pasado la clase y el string único al elemento. Es decir, no solo pasamos el nombre de clase tweetsPage, sino que pasamos todo el string con el código hash único que llama al estilo declarado. Esto lo podrás ver más claramente en el panel de elementos de tu inspector, donde verás que la clase que toma el navegador tiene el string que obtenemos con el objeto styles.

Definir los estilos de esta manera hace que el alcance de la clase se mantenga a nivel local. Esto significa que solo se aplicará al componente que hemos definido en el archivo específico. Si tuviéramos, por ejemplo, un archivo loginPage con la clase tweetsPage, el estilo de la clase no sería aplicado aunque tuviera el mismo nombre.

De este modo, CSS Modules en React nos garantiza que las clases que definimos son únicas. Y como son únicas, no pueden colisionar con ninguna otra clase que tengamos por ahí.

¿Quieres seguir aprendiendo?

Ahora que sabes qué son y cómo funcionan los CSS Modules en React, ¡es momento de usar esta herramienta para estilizar tus aplicaciones y proyectos! Si quieres seguir aprendiendo a desarrollar todo tipo de proyectos de programación para la web, tanto en React como en JavaScript, HTML y CSS, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. En este programa de formación intensiva, aprenderás todo lo necesario para ser un experto del desarrollo web. ¿A qué esperas para empezar? ¡Matricúlate ya!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!