Для чего нужны модульные стили в CSS?

Модульные стили — стили, разбитые по компонентам и изолированные друг от друга, чтобы изменения в одном месте не ломали другое.

Проблема без модульности

Весь CSS глобальный: класс .title в одном файле перекрывает .title в другом, а удалить старый стиль страшно — непонятно, где он ещё используется.

Способы сделать стили модульными

• Методологии именования — БЭМ: .card__title.
• CSS Modules — уникальные имена классов при сборке.
• Scoped-стили — во Vue <style scoped>, в Svelte по умолчанию.
• CSS-in-JS — стили внутри компонента.
• Cascade layers (@layer) — управление порядком слоёв.
• `@scope` — нативное ограничение области действия стилей.

Что это даёт

• компоненты можно переносить и удалять вместе со стилями;
• меньше неожиданных конфликтов и !important;
• проще поддерживать большой проект и работать командой.

Коротко для собеседования

Модульные стили изолируют CSS по компонентам (БЭМ, CSS Modules, scoped, CSS-in-JS), чтобы избежать глобальных конфликтов и упростить поддержку.

Подробнее: MDN — @scope