Что такое изоляция стилей?

Изоляция стилей — это подходы, которые не дают CSS-правилам одного компонента влиять на другие, предотвращая конфликты и «протекание» стилей по всему приложению.

Проблема

Глобальный CSS: селектор .button из одного места случайно переопределяет кнопки везде. При росте проекта конфликты неизбежны.

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

CSS Modules

Классы автоматически получают уникальные имена при сборке:

import styles from './Button.module.css';
<button className={styles.button} /> // .button_a1b2c3

CSS-in-JS

Стили пишут в JS, генерируются уникальные классы: styled-components, Emotion.

Scoped styles

Vue <style scoped> — добавляет уникальный атрибут к элементам компонента.

Shadow DOM

Веб-компоненты: стили полностью изолированы внутри shadow root — не протекают ни внутрь, ни наружу.

Соглашения об именовании

BEM — методология именования классов, снижающая конфликты без инструментов.

Как выбирать

• React → CSS Modules или CSS-in-JS.
• Vue → scoped styles.
• Веб-компоненты → Shadow DOM.
• Без сборки → BEM.

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

Изоляция стилей предотвращает конфликты CSS между компонентами: CSS Modules (уникальные имена классов), CSS-in-JS, Vue scoped, Shadow DOM (полная изоляция), BEM (соглашение об именовании). Выбор зависит от стека.