CSS Modules
Contenido del curso
CSS Modules
Contenido del curso
Julian Franco
César Palma
Tomás André Peñaloza Avilés
Fidel Parabacuto
Rubén Ernesto Aragón Gil
Luis Guzmán
Kleiver Perez
Kenneth Angulo L
fabio andres zamora osorio
Diana Martinez
David Corral Fiestas
Diana Martinez
David Corral Fiestas
Diana Martinez
Uriel Solis Salinas
Diana Martinez
Andrés Felipe Cano Sierra
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:
import buttonStyles from './button.module.css' document.querySelector('#app').innerHTML = ` <h2> Hello PLatzi! </h2> <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:
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 buttonS++t++yles porque asi es como lo pronuncia a la hora de hablar
Gracias man! Me estaba mostrando un objeto vacio al hacer el console.log de la importacion!
¿Qué pasa si mezclo estilos globales y módulos?
No pasa nada malo; de hecho, es una práctica muy común y recomendada. Puedes tener un archivo global.css para definir tu tipografía base, reseteos (como margin: 0), y variables de colores usando :root. Estos estilos afectarán a toda la aplicación. Al mismo tiempo, puedes usar CSS Modules para los estilos específicos de cada componente, como tarjetas, botones o modales. La clave está en usar los estilos globales para la estructura fundamental y los módulos para los detalles aislados. El sistema manejará ambos sin problemas, inyectándolos correctamente en el DOM.
Para usar css modules en un archivo css dicho archivo css debe tener solo selectores de clase o puede tener selectores de id, etiqueta, etc
Vite se centra en ser una herramienta que admita todo lo estándar de HTML, CSS y JS, por lo tanto deberías poder utilizar todo lo que necesites sin problemas, Vite solo te agrega más cosas, pero siempre va a tratar de no limitarte para nada ni hacerte usar cosas diferentes al estandar, a menos que sea para extender las capacidades normales de HTML, CSS o JS.
En resumen, si, puedes utilizar todo lo que necesites.
Vale, he investigado un poco (chatGPT) y creo que Vite no requiere de Babel (que sí hay que instalar si usamos Webpack), pero sin embargo, chatGPT me dice que también se podría configurar Babel en caso de que se usen navegadores antiguos. Podemos fiarnos de Vite ? o mejor configurar Babel ?, saludos !
Depende de lo que necesites, es posible que vite ya cubra la mayoría de tus necesidades, personalmente nunca he necesitado babel.
Hola chicos, tengo una duda. Con Webpack podemos configurar Babel para que transpile nuestros archivos .js a javascript que entienda el navegador, es decir, para utilizar características avanzadas, etc. Pero se puede hacer lo mismo con Vite, es decir, no veo por ninguna parte que se tenga que instalar nada respecto de si queremos que nos transpile nuestros archivos de ES6 a javascript que entiendan los navegadores, quizás lo hace de forma automática ?, gracias !
Vite es una herramienta inherentemente para frontend, por lo tanto, puedes asumir que está pensada para construir cosas para el navegador.
¿Qué ventajas tiene usar CSS modules a importar un archivo CSS normal?
CSS Modules te permite utilizar CSS que no está en el contexto global, solo existe dónde tu quieres, por decirlo de algún modo. Cabe destacar que CSS Modules es una funcionalidad nativa de CSS y no de Vite, Vite simplemente te muestra que es muy fácil usarlos y que es posible usarlos en tus proyectos de Vite, pero como todo, sigue siendo opcional.
Cómo evitar colisión de selectores usando css modules
