¿Para qué sirven los Módulos CSS? ¿Por qué no usamos CSS normal?

Los módulos CSS son necesarios para aislar los estilos a nivel de componentes, para evitar conflictos de nombres de clases y contaminación global de estilos. En CSS normal, todas las clases son globales, y en un proyecto grande es fácil enfrentarse al problema de sobrescritura de estilos.

Ventajas de los módulos CSS:

• Ámbito local de las clases — cada clase es única y no entra en conflicto con otras.
• Facilidad de mantenimiento y escalabilidad del código.
• Posibilidad de usar clases dinámicas e importar estilos como objetos en JavaScript.

Ejemplo de uso:

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Haz clic en mí</button>;
}

Aquí, la clase primary será generada con un nombre único, por ejemplo Button_primary__abc123, lo que evita conflictos.