CSS Modules

Una manera de usarlo en React es:

CSS o SCSS Modules

El objetivo de esto es conseguir que el CSS que declaremos sea relativo y único hacia el componente que lo estamos importando.

¿Cómo hacer que una clase de CSS sea única, dándole un nombre único y diferente? se consigue con modules CSS que apoyado en un bundle permite generar un identificador único para cada clase del CSS

A nuestros archivos de CSS debemos agregarle un .module.css

NombreComponente.module.css

Sin embargo también la manera de importarlos y usarlos en nuestro componentes sera diferente

import style from './NombreComponente.module.css'

function NombreComponente({ todos }) {
	return (
		<div className={stlye.container}>
			<p>Content</p>
		</div>
	);
}

export { NombreComponente};

Si queremos usar más dos clases para una solo etiqueta podemos usar template Strings o template literals, respetando el espacio en medio que tienen dichas clases

div className={`${stlye.container} ${stlye.margin}`}>

No olvidemos usar el normalize o un reset de CSS ya que todos los navegadores tienen diferentes márgenes por lo cual nuestro CSS pueden llegar a colapsar.

Requerimientos:

1. Nuestro archivo a importar debe terminar en .module.css(scss): ejemplo.module.css
2. Los module CSS se pueden importar como si fueran otra librería. El archivo button.module.css (ejemplo abajo) solo tiene una clase ‘btn’. al importar el módulo la variable buttonStyles almacenará un objeto con las classes del archivo como propiedades del objeto cuyo valores serán los nombres autogenerados a los que podemos hacer referencia en nuestro html.
3. Agregamos esta clase a nuestro código.

import buttonStyles from './button.module.css'

document.querySelector('#app').innerHTML = `
<h1> Hello PLatzi! </h1>
<a href="https://vitejs.dev/guide/features.html" target="_blank">Hola</a>
<button id="btn" class="${buttonStyles.btn}">Button</button> 
`

//otra forma
document.getElementById('btn').className = buttonStyles.btn

Módulos CSS

.
Es una herramienta de automatizadores (Webpack o Vite) que al compilar nuestros archivos CSS/Sass/Less cambian el nombre de nuestras clases (namespacing) para reducir su especificidad y así aislar cada regla CSS a sus componentes asignados.

.

Fueron creados por la problemática de los sitios web masivos, como Facebook y AirBnB para mantener especificidad baja de sus estilos.

.

En palabras sencillas, son archivos que al compilarse agregan un Hash a nuestras clases para minimizar la especificidad y evitar choques de reglas CSS a medida que la app crece.

Más Información: css-tricks.com

Los CSS Modules son una característica de Vite que le permite incluir archivos de hojas de estilo en su aplicación de manera más segura y mantenible.

Cuando utiliza CSS Modules, Vite asigna automáticamente nombres únicos a cada clase de hoja de estilo en su aplicación y los empaqueta en un archivo de estilo separado. Esto evita que las clases de hoja de estilo de diferentes componentes de su aplicación entren en conflicto y hace que sea más fácil mantener y actualizar su aplicación a medida que crece.

Es un estándar para resolver los problemas de modularidad de CSS

En el file button.module.css nomas agregué el elemento como un id y no como clase y no tuve que ponerle un classname

en el archivo: button.module.css para poder utilizar el ID hay que poner #btn y el import buttonSyles debería ser buttonStyles porque asi es como lo pronuncia a la hora de hablar

Cómo evitar colisión de selectores usando css modules