No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Vite.js

Curso de Vite.js

Diana Mart铆nez

Diana Mart铆nez

CSS Modules

8/19
Recursos

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

Aportes 7

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榖tn鈥. 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

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

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

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