Зачем нужен CSS Modules? Почему мы не используем обычный CSS?

CSS Modules нужны для изоляции стилей на уровне компонентов, чтобы избежать конфликтов имен классов и глобального загрязнения стилей. В обычном CSS все классы глобальны, и при большом проекте легко столкнуться с проблемой переопределения стилей.

Преимущества CSS Modules:

• Локальная область видимости классов — каждый класс уникален и не конфликтует с другими.
• Удобство поддержки и масштабирования кода.
• Возможность использовать динамические классы и импортировать стили как объекты в JavaScript.

Пример использования:

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

function Button() {
  return <button className={styles.primary}>Нажми меня</button>;
}

Здесь класс primary будет сгенерирован с уникальным именем, например Button_primary__abc123, что исключает конфликты.