Зачем склеивать названия классов через амперсанд?

Зачем склеивать названия классов через амперсанд?

Это вопрос о БЭМ (Block Element Modifier) методологии, которая широко используется в CSS для организации стилей. Амперсанд (&) в CSS препроцессорах (Sass, Less) используется для конкатенации селекторов.

Что такое БЭМ?

БЭМ — методология именования CSS классов, которая делает код более структурированным и предсказуемым. Структура выглядит так:

Блок: .button
Элемент: .button__text
Модификатор: .button--primary

Зачем нужна конкатенация через амперсанд?

1. Избежание повторения префикса

Вместо того чтобы писать полный класс каждый раз, мы используем амперсанд для ссылки на родительский селектор:

// Плохо - дублирование
.button {
  padding: 10px 20px;
}

.button__text {
  font-size: 14px;
}

.button--primary {
  background: blue;
}

// Хорошо - с амперсандом
.button {
  padding: 10px 20px;
  
  &__text {
    font-size: 14px;  // Становится .button__text
  }
  
  &--primary {
    background: blue;  // Становится .button--primary
  }
}

2. Меньше ошибок и опечаток

Когда вы пишете селектор полностью каждый раз, легко сделать опечатку. С амперсандом селектор генерируется автоматически:

.card {
  border: 1px solid #ccc;
  
  &__header {
    padding: 15px;  // Гарантированно будет .card__header
  }
  
  &__body {
    padding: 15px;  // Гарантированно будет .card__body
  }
  
  &--active {
    border-color: blue;  // Гарантированно будет .card--active
  }
}

3. Облегчение рефакторинга

Если нужно переименовать блок, достаточно изменить его имя один раз:

// Было
.oldCardName {
  &__header { }
  &__body { }
  &--active { }
}

// Стало - просто переименовали один класс
.newCardName {
  &__header { }
  &__body { }
  &--active { }
}

4. Улучшение читаемости

Препроцессор показывает иерархию и связь между селекторами:

.modal {
  position: fixed;
  
  &__overlay {
    background: rgba(0, 0, 0, 0.5);
  }
  
  &__content {
    background: white;
    border-radius: 8px;
  }
  
  &__header {
    border-bottom: 1px solid #e0e0e0;
  }
  
  &--large {
    &__content {
      width: 80%;  // Вложенные модификаторы!
    }
  }
}

Практический пример с Tailwind и условными классами

В современном Frontend часто используется Tailwind CSS с инструментом cn() для конкатенации классов, что служит похожей цели:

import { cn } from '@/lib/utils';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

export function Button({ variant = 'primary', size = 'md' }: ButtonProps) {
  return (
    <button
      className={cn(
        'font-semibold rounded-lg transition',  // базовые стили
        variant === 'primary' && 'bg-blue-500 text-white',  // модификаторы
        variant === 'secondary' && 'bg-gray-200 text-black',
        size === 'sm' && 'px-2 py-1 text-sm',  // размеры
        size === 'md' && 'px-4 py-2 text-base',
        size === 'lg' && 'px-6 py-3 text-lg'
      )}
    >
      Click me
    </button>
  );
}

Выводы

Амперсанд в БЭМ методологии — это инструмент для:

• Уменьшения дублирования кода
• Снижения количества опечаток
• Облегчения рефакторинга
• Улучшения читаемости структуры
• Поддержания единообразного стиля

Это best practice в Front-end разработке, который делает CSS код более поддерживаемым и профессиональным.