CSS Modules

Los CSS modules son una tecnología para organizar nuestro código en CSS por medio de módulos, algo muy similar a como trabajamos con las librerías de JS.

Uso de CSS modules en Vite

Primero debemos crear un archivo que termine con la extension .module.css.

button.module.css

Dentro de este vamos a generar unos estilos para el siguiente botón, que encontramos en el archivo main.js.

<button id="counter" type="button"></button>

Los estilos serán los siguientes:

.btn {
    background-color: violet;
    text-transform: uppercase;
}

.btn:hover {
    background-color: orange;
}

Importación de CSS modules en Vite

Una vez generado nuestro CSS module, faltaría importarlo en el main.js, estos se importan como un módulo:

// Asignamos un nombre al archivo que vamos a importar
// y le indicamos de donde viene
import buttonStyles from "./button.module.css";

Ahora, si imprimimos buttonStyles, veremos que contendrá un JSON con la propiedad btn, que es igual a una cadena de texto, esto representa una clase en CSS lista para ser usada en los elementos HTML.

btn: "_btn_wnlhd_1"

Aplicando los CSS Modules

Para aplicar los estilos debemos de insertar la clase btn, que se encuentra dentro de buttonStyles, en la etiqueta button. Existen varios metodos.

1. Acceder a la etiqueta a través de su id, después a la propiedad className y asignarle la clase btn, que se encuentra dentro de buttonStyles.

   document.getElementById("counter").className = buttonStyles.btn;

2. Aunque también podemos ir a la etiqueta y darle la clase directamente, algo así:

   <button id="counter" class=${buttonStyles.btn} type="button"></button>

Cuando guardes los cambios, el botón tiene los estilos que le indicamos en nuestro módulo, esta es una manera estándar que nos ofrece CSS para separar nuestro código y que los estilos sean únicos hacia el componente que lo estamos importando.

Contribución creada por: Jofay Zhan Segura