В чем заключаются отличия методов изоляции CSS?

CSS-модули, scoped CSS (в прошлой спецификации), CSS-in-JS.

CSS-модули:

• Каждый файл .css рассматривается как модуль.
• Класс или идентификатор в CSS-файле преобразуется в уникальное имя (обычно хэшированное).
• Для использования стилей в компоненте, импортируется CSS-модуль и классы используются как свойства импортированного объекта.

Пример CSS-модуля:

/* styles.module.css */
.button {
  background-color: blue;
  color: white;
}

// Component.js
import styles from './styles.module.css';

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

Scoped CSS (устаревшая спецификация, но принципы используются в фреймворках):

• Стили внутри элемента <style scoped> применялись только к его родительскому элементу и его потомкам.
• В чистых браузерах более не поддерживается. Современные фреймворки (например, Vue) реализуют аналогичный функционал.

Пример Scoped CSS (концептуально):

<template>
  <div class="container">
    <p>Текст</p>
  </div>
</template>

<style scoped>
.container {
  border: 1px solid black;
}
p {
  color: red;
}
</style>

CSS-in-JS:

• Стили пишутся непосредственно в JavaScript или TypeScript коде.
• Существуют различные библиотеки (например, styled-components, Emotion).
• Стили могут быть привязаны к компонентам, обеспечивая автоматическую изоляцию и динамические стили.

Пример CSS-in-JS (styled-components):

import styled from 'styled-components';

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

function Component() {
  return <Button>Click me</Button>;
}

Сравнение методов:

Метод	Где пишутся стили	Изоляция	Зависимости	Динамические стили
CSS-модули	Отдельные .css файлы	Преобразование имен классов	Модульный бандлер (Webpack, Parcel)	Ограниченные (через классы)
Scoped CSS	<style scoped> в HTML/компонентах	Браузер (устаревшая спецификация), фреймворки	Нет (чистый CSS), или встроено во фреймворк	Ограниченные
CSS-in-JS	В JS/TS коде	Библиотека CSS-in-JS	Библиотека CSS-in-JS	Полные (JS возможности)