Способы изоляции стилей в CSS

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

Изоляция стилей — это подход к написанию CSS, при котором стили одного компонента не влияют на другие части приложения. Это важно для:

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

Способы изоляции стилей

БЭМ (BEM) — Block Element Modifier

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

/* Стиль по БЭМ */
.button {}
.button__icon {}
.button--primary {}

• Имена классов описывают иерархию компонента.
• Работает в любом CSS, без инструментов.

CSS Modules

Файлы .module.css (или .module.scss) используются в React/Vue/etc. и обеспечивают автоматическую локализацию классов.

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click</button>;
}

• Классы преобразуются в уникальные.
• Нет пересечений между компонентами

Shadow DOM (Web Components)

Изоляция на уровне браузера — создаёт "теневую" область DOM, скрытую от внешних стилей.

const shadow = element.attachShadow({ mode: "open" });
shadow.innerHTML = `<style>p { color: red; }</style><p>Hello</p>`;

• Полная изоляция.
• Стили не протекают внутрь и наружу.
• Требует поддержки Web Components.

CSS-in-JS

Стили пишутся прямо в JavaScript с помощью библиотек:

• Styled-components
• Emotion
• Stitches
• Vanilla Extract

import styled from 'styled-components';

const Button = styled.button`
  color: white;
  background: blue;
`;

• Отличная изоляция, динамические стили.
• Увеличение bundle size и зависимость от библиотеки.

Atomic CSS (Utility-first)

Использование классов с конкретным значением (Tailwind CSS).

<button class="bg-blue-500 text-white px-4 py-2">Click</button>

• Нет "настоящих" компонентов, всё на уровне классов.
• Стили предсказуемы, не конфликтуют.