Какие знаешь способы изоляции в CSS?

CSS изоляция: способы и подходы

CSS изоляция — это критически важная техника в modern frontend разработке. Она предотвращает конфликты стилей между компонентами и упрощает поддержку кода. Расскажу о всех основных подходах.

1. CSS Modules

Проблема: Global namespace загрязнение

/* ❌ Плохо — может конфликтовать с другим .button в проекте */
.button {
  padding: 10px 20px;
  background: blue;
}

Решение: CSS Modules

/* Button.module.css */
.button {
  padding: 10px 20px;
  background: blue;
}

.buttonPrimary {
  background: blue;
  color: white;
}

.buttonSecondary {
  background: gray;
  color: black;
}

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

function Button({ variant = 'primary' }) {
  const buttonClass = variant === 'primary' 
    ? styles.buttonPrimary 
    : styles.buttonSecondary;
  
  return <button className={buttonClass}>Click</button>;
}

// Компилируется в:
// <button class="Button_buttonPrimary__a1b2c">Click</button>
// Класс автоматически уникален!

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

• Локальный скоп по умолчанию
• Гарантия отсутствия конфликтов
• Производительность (меньше CSS отправляется)

Когда использовать:

• Компонентные стили
• Когда нужна гарантия уникальности

2. BEM (Block Element Modifier)

Соглашение об именовании для избежания конфликтов

/* Плохо: неясная иерархия */
.card {}
.title {}
.description {}
.button {}

/* ✅ Хорошо: ясная структура с BEM */
.card {}                    /* Block */
.card__header {}            /* Element */
.card__title {}             /* Element */
.card__description {}       /* Element */
.card__footer {}            /* Element */
.card__button {}            /* Element */
.card__button--primary {}   /* Modifier */
.card__button--secondary {} /* Modifier */
.card--featured {}          /* Block Modifier */

Использование в HTML:

<div class="card card--featured">
  <div class="card__header">
    <h2 class="card__title">Title</h2>
  </div>
  <div class="card__description">Description</div>
  <button class="card__button card__button--primary">Primary</button>
  <button class="card__button card__button--secondary">Secondary</button>
</div>

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

• Не требует инструментов (работает везде)
• Понятная структура
• Легко поддерживать

Когда использовать:

• Традиционные проекты
• Global стили
• Когда нет сборщика (CSS Modules)

3. Tailwind CSS

Utility-first подход к изоляции

<!-- ✅ Стили инкапсулированы в классы -->
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
  Click me
</button>

<div class="flex flex-col gap-4 p-6 bg-gray-100 rounded-xl">
  <h1 class="text-2xl font-bold text-gray-900">Title</h1>
  <p class="text-gray-600">Description</p>
</div>

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

• Быстрое прототипирование
• Нет unused CSS (purging)
• Единственный источник истины (дизайн система)
• Автоматическая изоляция (уникальные классы)

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#10B981',
      },
    },
  },
  plugins: [],
};

Когда использовать:

• Быстрые проекты
• Design system с constraints
• Modern stack (React, Vue, etc.)

4. SCSS/SASS (Nesting)

Изоляция через нестинг

// ❌ Плохо: глобальный скоп
.button {
  padding: 10px;
}
.button:hover {
  background: blue;
}

// ✅ Хорошо: локальный скоп через нестинг
.card {
  padding: 20px;
  border-radius: 8px;
  
  .title {  // Компилируется в .card .title
    font-size: 24px;
    font-weight: bold;
  }
  
  .button {  // Компилируется в .card .button
    padding: 10px;
    
    &:hover {  // .card .button:hover
      background: blue;
    }
    
    &--primary {  // .card .button--primary
      background: blue;
      color: white;
    }
  }
}

Компилируется в:

.card {
  padding: 20px;
  border-radius: 8px;
}
.card .title {
  font-size: 24px;
  font-weight: bold;
}
.card .button {
  padding: 10px;
}
.card .button:hover {
  background: blue;
}

Переменные для изоляции

$card-padding: 20px;
$card-border-radius: 8px;
$button-padding: 10px;
$primary-color: #3B82F6;

.card {
  padding: $card-padding;
  border-radius: $card-border-radius;
  
  .button {
    padding: $button-padding;
    background: $primary-color;
  }
}

5. CSS-in-JS (Styled Components, Emotion)

Изоляция на уровне JavaScript

// styled-components
import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 10px 20px;
  background: blue;
  color: white;
  border: none;
  border-radius: 4px;
  
  &:hover {
    background: darkblue;
  }
  
  &:active {
    transform: scale(0.98);
  }
`;

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

// Каждый компонент получает уникальный класс:
// <button class="sc-gKXOVf geevYI">Click me</button>

С пропсами:

const Button = styled.button`
  padding: ${props => props.size === 'large' ? '20px' : '10px'};
  background: ${props => props.variant === 'primary' ? 'blue' : 'gray'};
  color: ${props => props.disabled ? 'lightgray' : 'white'};
`;

function App() {
  return (
    <>
      <Button size="large" variant="primary">Large Primary</Button>
      <Button size="small" variant="secondary" disabled>Disabled</Button>
    </>
  );
}

Emotion (аналог):

import { css } from '@emotion/react';
import styled from '@emotion/styled';

const buttonStyles = css`
  padding: 10px 20px;
  background: blue;
  color: white;
  border: none;
`;

const Button = styled.button`
  ${buttonStyles}
  border-radius: 4px;
  
  &:hover {
    background: darkblue;
  }
`;

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

• Динамические стили (props-based)
• JavaScript для логики
• Автоматическая изоляция
• Tree-shaking unused styles

6. Shadow DOM

Браузерная изоляция (Web Components)

class MyButton extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    
    const style = document.createElement('style');
    style.textContent = `
      button {
        padding: 10px 20px;
        background: blue;
        color: white;
        border: none;
        border-radius: 4px;
      }
      
      button:hover {
        background: darkblue;
      }
    `;
    
    const button = document.createElement('button');
    button.textContent = this.textContent;
    
    shadow.appendChild(style);
    shadow.appendChild(button);
  }
}

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

Использование:

<my-button>Click me</my-button>

<!-- Стили не влияют на остальной DOM -->
<style>
  button { background: red; } <!-- НЕ влияет на my-button! -->
</style>

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

• Истинная изоляция (браузер гарантирует)
• Инкапсуляция DOM и стилей
• Нет конфликтов

Недостатки:

• Сложнее с современным tooling
• Медленнее для большого количества элементов

7. PostCSS Plugins

Автоматическое добавление префиксов и изоляция

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested'),
    require('postcss-scope'),  // Автоматическая изоляция
  ],
};

8. Стратегия изоляции в большом проекте

Best practice комбинация:

Global styles (reset, typography)
          ↓
Tailwind utilities (для компонентов)
          ↓
CSS Modules/Styled Components (для специфических компонентов)
          ↓
Inline styles (только для динамических значений)

// Структура проекта
src/
├── styles/
│   ├── globals.css          // Reset, typography
│   ├── variables.css        // CSS переменные
│   └── theme.css           // Theme colors
├── components/
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── Button.module.css  // Локальные стили
│   ├── Card/
│   │   ├── Card.jsx
│   │   └── Card.module.css

Global стили (minimal):

/* src/styles/globals.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: #1f2937;
  background: #ffffff;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.2;
}

Компонентные стили:

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

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

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

Рекомендация

Для большинства проектов:

1. Начни с Tailwind — скорость прототипирования
2. Доп CSS Modules для сложных компонентов — для специфики
3. BEM для разделяемого кода — если нужна стандартизация

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