CSS: изоляция стилей

Проблема глобальной области видимости CSS решается разными подходами к изоляции и именованию.

BEM (Блок, Элемент, Модификатор)

Компонентный подход к вёрстке: интерфейс делится на независимые блоки. Имена селекторов строятся по схеме block__element--modifier.

.card {}
.card__title {}
.card--featured {}

Плюсы:

• упрощает код и рефакторинг;
• назначение селекторов очевидно из имён — не нужны комментарии;
• переиспользование фрагментов, в т.ч. на одном DOM-узле;
• предотвращает взаимное влияние компонентов.

---

CSS Modules

CSS-файлы, в которых все имена классов и анимаций по умолчанию локальны (scoped). Сборщик генерирует уникальные имена — снимает с разработчика ответственность за именование и коллизии.

import styles from "./Button.module.css";
<button className={styles.primary}>OK</button>;

---

Atomic CSS

Подход, при котором используются маленькие однозадачные классы с именами по визуальной функции (например, mt-4, flex, text-center). Стилизация происходит композицией атомарных классов в разметке (идея Tailwind и подобных).

---

CSS-in-JS

Внешний слой функциональности, позволяющий писать CSS-свойства для компонентов через JavaScript (styled-components, Emotion). Стили привязаны к компоненту, поддерживают динамику через пропсы; изоляция достигается генерацией уникальных классов.