CSS Modules: estilos con ámbito
Aplique automáticamente un ámbito local a los nombres de clase de los componentes mediante CSS Modules en su configuración de compilación.
CSS Modules: estilos con ámbito es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 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 CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué son los CSS Modules?
CSS Modules limita automáticamente el ámbito de los nombres de clase CSS al archivo del componente en el que se definen. Cada nombre de clase se transforma en un identificador único durante la compilación, lo que evita que los estilos se filtren globalmente.
Convención de nombres de archivo
Asigne a su archivo CSS la extensión .module.css (o .module.scss para Sass):
/* Button.module.css */
.button {
background: royalblue;
color: white;
padding: 10px 20px;
border-radius: 4px;
}Importación de CSS Modules
Importe el módulo como un objeto de JavaScript. Los nombres de clase se convierten en propiedades:
import styles from './Button.module.css';
function Button({ children }) {
return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)Clases compuestas
Utilice composes para extender una clase de otro módulo:
/* Button.module.css */
.primary {
composes: base from "./Base.module.css";
background: royalblue;
}Clases globales
Utilice :global() para excluir una clase específica del aislamiento local:
/* styles.module.css */
.container :global(.third-party-class) {
/* targets third-party className without scoping */
color: red;
}CSS Modules en Vite
Vite incorpora compatibilidad con CSS Modules. Los archivos que coinciden con *.module.css se procesan automáticamente:
// vite.config.js
export default {
css: {
modules: {
localsConvention: 'camelCase' // .my-class → styles.myClass
}
}
}CSS Modules en webpack
Habilite los módulos en la configuración de css-loader:
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}
}Composición de nombres de clase
Combine varias clases de módulos mediante literales de plantilla o la biblioteca clsx/classnames:
import styles from './Card.module.css';
import clsx from 'clsx';
function Card({ featured }) {
return (
<div className={clsx(styles.card, featured && styles.featured)}>
Content
</div>
);
}Sin coste en tiempo de ejecución
CSS Modules se resuelve por completo durante la compilación, por lo que no hay sobrecarga de JavaScript en tiempo de ejecución. El resultado es CSS estándar con los nombres de clase renombrados. Esto los hace ideales para aplicaciones en las que el rendimiento es importante.
Compatibilidad con TypeScript
Genere definiciones de tipos de TypeScript para CSS Modules mediante typed-css-modules o la configuración cssModuleTypes de Vite, para acceder a los nombres de clase con seguridad de tipos.
CSS Modules frente a CSS-in-JS
Comparación con CSS Modules:
- Solo durante la compilación: no hay coste de JS en tiempo de ejecución
- Se integra con CSS/Sass estándar: sintaxis familiar
- No permite estilos dinámicos mediante interpolación de JavaScript
- Es menos flexible para estilos dinámicos basados en temas que styled-components o Emotion
Comprobación rápida
¿Cómo evita un CSS Module las colisiones de nombres de clase entre dos archivos de componentes diferentes?
Resumen
CSS Modules aísla automáticamente los nombres de clase al transformarlos en identificadores únicos durante la compilación. Importe los módulos como objetos de JavaScript y acceda a las clases como propiedades. Utilice :global() para excluir selectores globales del aislamiento y composes para combinar clases. El coste nulo en tiempo de ejecución y la compatibilidad total con la sintaxis de CSS/Sass lo convierten en una alternativa ligera a CSS-in-JS para estilos estáticos.
Preguntas frecuentes
¿La lección «CSS Modules: estilos con ámbito» es gratis?
Sí — el texto completo de «CSS Modules: estilos 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 CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «CSS Modules: estilos con ámbito»?
Aplique automáticamente un ámbito local a los nombres de clase de los componentes mediante CSS Modules en su configuración de compilación. Practicas CSS 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 CSS Academy?
No se requiere experiencia previa. CSS 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 3 de 4.
¿Cuánto tiempo toma la lección «CSS Modules: estilos 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 CSS Academy?
Sí. Cada lección de CSS 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
- Styled-components: tagged template literals
- Emotion: css() y styled()
- CSS Modules: estilos con ámbito
- Vanilla Extract: CSS-in-JS sin runtime