Los módulos CSS son un enfoque que permite delimitar los nombres de clases CSS a componentes específicos de manera local. Ofrecen una forma de escribir código CSS de manera modular y encapsulada, lo que reduce las posibilidades de conflictos de estilos y facilita el mantenimiento de los mismos. De hecho, se ha convertido en uno de los enfoques más adoptados para organizar proyectos en React.

Organización de archivos y carpetas

Supongamos que tenemos la siguiente interfaz de usuario compuesta por tres componentes: VideoPlayer, AuthorInformation y VideoDescription.

No consolidaremos todos los componentes y estilos en un solo archivo. En su lugar, estableceremos una carpeta separada para cada componente. Dentro de cada carpeta, crearemos un archivo jsx para el renderizado y la lógica, y un archivo css para aplicar los estilos. Cada archivo css debe terminar con module.css para lograr la modularidad. Así, la estructura se vería de la siguiente manera:

Nota

Este enfoque ofrece una solución conveniente para crear componentes de React y escribir estilos. Garantiza que cada componente esté aislado y pueda reutilizarse de manera efectiva. El alcance local de los nombres de clase mejora la organización del código, promueve la reutilización y evita conflictos de estilos.

Sintaxis

Analicemos la sintaxis para utilizar estilos modulares en un componente, usando el componente VideoDescription como ejemplo.

Dentro de VideoDescription.jsx, se crea un componente que genera un marcado específico. No hay nada particularmente nuevo o desconocido en esto.

const VideoDescription = () => (
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

La diferencia surge cuando se desea aplicar un nombre de clase. Primero, se debe importar el archivo VideoDescription.module.css en el archivo VideoDescription.jsx. Esto se puede lograr utilizando la siguiente sintaxis:

import <file_name> from "<file_path>";

• <file_name> puede ser cualquier palabra que se asocie con el archivo. Generalmente, se utiliza un nombre como: css, styles o simplemente s;
• <file_path> es la ruta correcta al archivo. Ya se conoce la sintaxis: ./.

Resultado:

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

Para asignar un nombre de clase al elemento, se puede utilizar el atributo className. Dentro de este atributo, se encierra el nombre de la clase deseada entre llaves {}. Dentro de las llaves, se incluye la palabra específica asociada al archivo de estilos, seguida de un punto . y el nombre de la clase. Resultado: className={css.text}. text es el nombre real de la clase.

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

const VideoDescription = () => (
  <p className={css.text}>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Ahora se puede abrir el archivo VideoDescription.module.css y aplicar los estilos al elemento p con el nombre de clase text utilizando el selector de clase:

.text {
  background-color: lightgreen;
  color: darkblue;
  font-size: 24px;
}