CSS Modules: nombres de clase con ámbito
Habilite CSS Modules en un proyecto de Vite o webpack para limitar automáticamente los nombres de clase al archivo del componente y eliminar filtraciones de estilos globales.
CSS Modules: nombres de clase con ámbito es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué son los CSS Modules?
CSS Modules transforma los nombres de clase en tiempo de compilación para incluir un hash único y limitar su ámbito al archivo del componente. Una clase llamada .card se convierte en .card_a1b2c3, por lo que es imposible que colisione accidentalmente con los estilos de otros componentes.
Cómo funcionan los CSS Modules
Importe el archivo CSS como un objeto. Use las propiedades del objeto como nombres de clase. Los bundlers (Vite, webpack) se encargan de la transformación.
// Button.module.css
.button {
background: #6366f1;
color: white;
padding: 8px 16px;
}
.button--large {
padding: 12px 24px;
}
// Button.tsx
import styles from './Button.module.css';
function Button({ large }: { large?: boolean }) {
return (
<button className={`${styles.button} ${large ? styles['button--large'] : ''}`}>
Click me
</button>
);
}Nombres de clase dinámicos con clsx
La biblioteca clsx simplifica la composición condicional de nombres de clase con CSS Modules.
import clsx from 'clsx';
import styles from './Button.module.css';
function Button({ variant, disabled }: ButtonProps) {
return (
<button className={clsx(
styles.button,
styles[`button--${variant}`],
disabled && styles['button--disabled']
)}>
...
</button>
);
}CSS global en CSS Modules
Use :global para declarar las clases cuyo ámbito NO debe limitarse. Es útil para sobrescribir las clases de bibliotecas de terceros.
/* Scoped: */
.container { padding: 16px; }
/* Global (not scoped): */
:global(.react-datepicker) {
font-family: inherit;
}Composición: extensión de clases
CSS Modules admite composes para heredar estilos de otra clase, incluso de otros módulos.
/* utilities.module.css */
.flexRow {
display: flex;
align-items: center;
gap: 8px;
}
/* Button.module.css */
.button {
composes: flexRow from './utilities.module.css';
background: #6366f1;
}CSS Modules frente a estilos con ámbito (Vue)
Los estilos con ámbito de Vue y CSS Modules evitan las filtraciones globales, pero funcionan de forma distinta: los estilos con ámbito añaden atributos de datos, mientras que CSS Modules transforma los nombres de clase. Ambos son válidos; CSS Modules también funciona en React.
CSS Modules en Vite
Vite admite CSS Modules de forma nativa para los archivos que terminan en .module.css. No se necesita configuración adicional.
TypeScript para CSS Modules
Instale typescript-plugin-css-modules o genere archivos .d.ts para CSS Modules con la herramienta typed-css-modules a fin de obtener autocompletado para los nombres de clase.
Convenciones de nombres en CSS Modules
Como los nombres de clase se convierten en propiedades de JavaScript, use camelCase para los nombres de clase en CSS Modules: .buttonPrimary en lugar de .button-primary (el guion requiere acceso mediante corchetes).
Cuándo usar CSS Modules
CSS Modules es una excelente opción para aplicaciones React que necesitan estilos limitados al ámbito de cada componente, pero en las que una solución completa de CSS-in-JS sería excesiva. Vite + CSS Modules ofrece una solución de estilos ligera y sin tiempo de ejecución.
CSS Modules frente a CSS-in-JS
CSS Modules: sin tiempo de ejecución, CSS estándar y mejor rendimiento. CSS-in-JS (styled-components): estilos dinámicos en tiempo de ejecución y enfoque centrado en JavaScript. Para la mayoría de las aplicaciones, CSS Modules es más sencillo y rápido.
Comprobación rápida
¿Qué ocurre con el nombre de una clase CSS cuando se utilizan CSS Modules?
Repaso: CSS Modules
Importe los archivos .module.css como objetos. Los nombres de clase se limitan automáticamente a un ámbito mediante un hash único. Use :global() para los estilos globales intencionados. Use composes para heredar estilos entre módulos. Use clsx para los nombres de clase condicionales. Vite admite CSS Modules de forma nativa. No tienen costes de tiempo de ejecución, a diferencia de CSS-in-JS.
Preguntas frecuentes
¿La lección «CSS Modules: nombres de clase con ámbito» es gratis?
Sí — el texto completo de «CSS Modules: nombres de clase con ámbito» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «CSS Modules: nombres de clase con ámbito»?
Habilite CSS Modules en un proyecto de Vite o webpack para limitar automáticamente los nombres de clase al archivo del componente y eliminar filtraciones de estilos globales. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «CSS Modules: nombres de clase con ámbito»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Metodología BEM: Block Element Modifier
- CSS Modules: nombres de clase con ámbito
- CSS-in-JS: Styled-components y Emotion
- Enfoque utility-first de Tailwind CSS