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

# Изоляция стилей в CSS

Определение

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

Проблема без изоляции

// Компонент Button
// styles.css
.button {
  color: blue;
  font-size: 14px;
}

// Другой компонент использует тот же класс
// styles-other.css
.button {
  color: red;
  font-size: 16px;
}

// В HTML получается конфликт и непредсказуемое поведение

Решения для изоляции стилей

1. CSS Modules

// Button.module.css
.button {
  color: blue;
  font-size: 14px;
  padding: 8px 16px;
}

// Button.jsx
import styles from "./Button.module.css";

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

Преимущества:

• Автоматическое преобразование имён классов в уникальные хэши
• Нет конфликтов имён
• IDE поддерживает автодополнение

2. BEM (Block Element Modifier)

/* button.css */
.button { }
.button__text { }
.button--primary { }
.button--primary:hover { }

<button className="button button--primary">
  <span className="button__text">Click me</span>
</button>

Преимущества:

• Легко следовать и понять
• Можно комбинировать с другими подходами

3. CSS-in-JS решения (Styled Components, Emotion)

// styled-components
import styled from "styled-components";

const StyledButton = styled.button`
  color: blue;
  font-size: 14px;
  padding: 8px 16px;

  &:hover {
    background-color: lightblue;
  }
`;

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

Преимущества:

• Полная изоляция стилей
• Динамические стили через props
• Автоматическое управление зависимостями

4. Shadow DOM

class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    
    const style = document.createElement("style");
    style.textContent = `
      button {
        color: blue;
        padding: 8px 16px;
      }
    `;
    
    const button = document.createElement("button");
    button.textContent = "Click me";
    
    shadow.appendChild(style);
    shadow.appendChild(button);
  }
}

customElements.define("my-button", MyButton);

Преимущества:

• Истинная инкапсуляция стилей
• Реальное разделение DOM и стилей

5. Tailwind CSS с компонентами

// В Tailwind v3+ используется @layer для организации
// tailwind.css
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
  }
}

// Button.jsx
export function Button() {
  return <button className="btn-primary">Click me</button>;
}

Сравнение подходов

Best Practices

1. Предпочитай CSS Modules для React приложений
2. Используй BEM если нужна простота и скорость
3. Выбирай CSS-in-JS для динамических стилей и сложной логики
4. Избегай глобальных стилей для компонентов
5. Организуй структуру папок: каждый компонент в отдельной папке со своими стилями

Пример полной изоляции в React

// Button/Button.module.css
.button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

.button.primary {
  background-color: #007bff;
  color: white;
}

.button.secondary {
  background-color: #6c757d;
  color: white;
}

// Button/Button.jsx
import styles from "./Button.module.css";
import { cn } from "@/lib/utils";

export function Button({ children, variant = "primary" }) {
  return (
    <button className={cn(
      styles.button,
      styles[variant]
    )}>
      {children}
    </button>
  );
}

Результат:

• Каждый компонент имеет собственные стили
• Нет конфликтов имён классов
• Легко переиспользовать компонент
• Легко тестировать и поддерживать