Зачем нужна изоляция в CSS?

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

Проблемы без изоляции

• Класс .title в одном компоненте случайно меняет .title в другом.
• Порядок подключения файлов начинает влиять на вид.
• Растёт специфичность и количество !important в попытках «перебить» чужие стили.
• Страшно удалять старый CSS — непонятно, где он используется.

Способы изоляции

• соглашения об именах (БЭМ);
• CSS Modules и scoped-стили — уникальные имена при сборке;
• CSS-in-JS;
• Shadow DOM — полная изоляция для веб-компонентов;
• @scope и @layer — нативные средства управления областью и приоритетом.

Что получаем

Компоненты можно переиспользовать, переносить и удалять вместе со стилями, а команда может работать параллельно.

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

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

Подробнее: CSS Modules