Вопросы React Frontend Developer

SCSS Modules — это подход, который комбинирует возможности препроцессора SCSS с концепцией CSS Modules. CSS Modules — это система, которая автоматически генерирует уникальные имена классов для селекторов, изолируя стили в рамках конкретного компонента. SCSS добавляет к этому миксины, вложенность, переменные и другие удобства. В результате разработчик пишет SCSS-код в отдельных файлах (например, Button.module.scss), а сборщик (например, Webpack) преобразует его в CSS с уникальными именами классов, гарантируя, что стили одного компонента не повлияют на другой.

CSS-переменные (custom properties) можно динамически изменять через JavaScript, устанавливая их значения через свойство style элемента или через setProperty. В CSS Modules переменные объявляются в глобальном селекторе :root или локально. Для динамического изменения достаточно обратиться к DOM-элементу и задать новое значение переменной, которая будет использована в стилях модуля.