Для чего подходят разные виды изоляции в CSS?

Основы CSS

Виды изоляции CSS подходят для разных задач — от глобальных стилей до полностью закрытых виджетов.

Варианты и где они уместны

БЭМ и другие соглашения — проекты без сборки, глобальные стили, библиотеки классов.
CSS Modules — компонентные приложения (React, Next.js): изоляция без рантайма.
Scoped-стили (Vue, Svelte) — компоненты в этих фреймворках «из коробки».
CSS-in-JS — когда стили сильно зависят от props и важна колокация с логикой.
Shadow DOM — веб-компоненты и виджеты, которые встраиваются на чужие сайты: стили не протекают ни внутрь, ни наружу.
`@layer` — управление приоритетом слоёв (reset, библиотека, компоненты, утилиты).
`@scope` — ограничение стилей поддеревом без переименования классов.

@layer reset, components, utilities;
@layer components {
  .card { padding: 16px; }
}

Сначала — что даёт ваш фреймворк. Shadow DOM — когда нужна жёсткая изоляция. Слои — чтобы навести порядок в приоритетах.

Соглашения и CSS Modules — для обычных приложений, scoped — во Vue/Svelte, Shadow DOM — для встраиваемых виджетов, @layer — для порядка каскада.

Подробнее: MDN — Shadow DOM