Что такое SCSS modules?

SCSS Modules — это технология, объединяющая мощь препроцессора SCSS с механизмом изоляции стилей CSS Modules. Она решает классическую проблему глобального пространства имён в CSS, где стили могут неожиданно конфликтовать в больших приложениях.

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

Вы создаёте файл с расширением .module.scss (например, Button.module.scss). Внутри вы пишете обычный SCSS-код, используя все его возможности: переменные, вложенность, миксины. При сборке (обычно с помощью Webpack и загрузчика sass-loader в связке с css-loader в режиме modules) система:

• Компилирует SCSS в CSS.
• Автоматически преобразует имена классов (например, .button) в уникальные хешированные идентификаторы (например, .Button_button__a5bKc).
• Создаёт объект-маппинг (JavaScript-объект), который сопоставляет исходные имена классов с сгенерированными.

Практическое применение и пример

Этот подход особенно популярен в React-приложениях. Вы импортируете объект стилей как модуль и используете сгенерированные имена классов через точечную нотацию.

// Button.module.scss
$primary-color: #3498db;

.button {
  background-color: $primary-color;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;

  &:hover {
    background-color: darken($primary-color, 10%);
  }

  &--large {
    padding: 15px 30px;
    font-size: 18px;
  }
}

// Button.jsx (React компонент)
import React from 'react';
import styles from './Button.module.scss'; // Импорт объекта стилей

const Button = ({ children, size }) => {
  // Динамически выбираем класс
  const buttonClass = `${styles.button} ${size === 'large' ? styles['button--large'] : ''}`;

  return (
    
      {children}
    
  );
};

export default Button;

В скомпилированном HTML кнопка получит уникальный класс, например class="Button_button__a5bKc Button_button--large__d7fGt". Это гарантирует, что стили этого конкретного компонента Button ни с чем не пересекутся.

Ключевые преимущества

• Полная изоляция: Стили ограничены компонентом, что устраняет побочные эффекты.
• Использование SCSS: Все преимущества препроцессора (переменные, миксины, функции) остаются доступными.
• Простота рефакторинга: Можно безопасно переименовывать классы внутри модуля, не боясь сломать другие части приложения.
• Явные зависимости: Если компонент удалён, его стили автоматически перестают подключаться.

Итог: SCSS Modules стоит применять в компонентно-ориентированных проектах (особенно на React, Vue), где важна модульность, поддерживаемость и необходимо избежать конфликтов стилей. Это золотая середина между чистыми глобальными стилями и CSS-in-JS решениями, предлагающая предсказуемость и мощь препроцессора.