для чего используется module.css?

CSS Modules — это подход к написанию CSS, при котором стили автоматически ограничиваются (scoped) конкретным компонентом, предотвращая глобальные конфликты. Это достигается за счёт компиляции: инструменты сборки, такие как Webpack, преобразуют имена классов в файлах с расширением .module.css в уникальные идентификаторы (например, .button → .button_abc123). Таким образом, стили, определённые в одном модуле, не "протекают" в другие компоненты, что особенно полезно в больших проектах с множеством разработчиков.

Как это работает

При импорте CSS-модуля в JavaScript-коде (например, в React-компоненте) вы получаете объект, где ключи — это исходные имена классов, а значения — сгенерированные уникальные имена. Это позволяет явно ссылаться на стили в разметке.

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

// Button.module.css
.primary {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

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

function Button() {
  return (
    
      Click me
    
  );
}

// В скомпилированном HTML класс будет выглядеть как
// Click me

Преимущества и применение

• Изоляция стилей: Исключает конфликты имён классов между компонентами.
• Простота рефакторинга: Можно безопасно изменять стили в одном модуле, не опасаясь побочных эффектов.
• Интеграция с инструментами: Легко работает с Webpack, Create React App, Next.js и другими современными сборщиками.
• Поддержка композиции: CSS Modules позволяют комбинировать классы через composes для повторного использования стилей.

CSS Modules особенно полезны в проектах на React, Vue или других компонентных фреймворках, где важно поддерживать модульность и избегать глобального пространства имён CSS. Они предлагают баланс между простотой обычного CSS и мощью CSS-in-JS, без накладных расходов на runtime.

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