Vue + БЭМ: почему это всё ещё работает

Методологию БЭМ придумали в Яндексе больше десяти лет назад. За это время фронтенд сильно изменился: появились компоненты, фреймворки, утилитарные классы и прочее. Казалось бы, БЭМ должен был уйти в архив. Но нет — он до сих пор спасает проекты от CSS-хаоса. Особенно когда речь заходит о Vue.

Почему? Потому что Vue думает компонентами, а БЭМ думает независимыми блоками. Они не конфликтуют. Они дополняют друг друга. Если у вас уже есть понятная, проверенная система — не стоит изобретать велосипед ради «современного» подхода. Архитектура важнее моды.

Прежде чем переходить к коду, давайте быстро вспомним, что такое БЭМ. Без занудства.

Три кита БЭМ

• Блок — самостоятельный компонент. Он не должен зависеть от контекста: никаких margin снаружи, никаких привязок к родительским стилям. Пример: .header, .card, .button.

• Элемент — часть блока, которая не существует отдельно. Имя пишется через двойное подчёркивание: .button__icon, .card__title.

• Модификатор — состояние или вариант блока/элемента. Пишется через одно подчёркивание: .button_disabled, .button_size_l, .card_theme_dark.

Как это работает во Vue

Во Vue стили обычно пишут прямо в компоненте. И тут начинается главный вопрос: scoped или нет? :deep() или нет? Один <style> или несколько?

Правило простое, но его часто нарушают:

• Всегда используйте scoped, если стили относятся только к этому компоненту. Это изолирует зону ответственности.

• :deep() — не зло, но это «аварийный выход». Применяйте его только когда работаете с сторонними UI-библиотеками или когда без него действительно никак. Не используйте его, чтобы обойти продуманную структуру.

Архитектура ломается не из-за технологий, а из-за решений «сейчас по-быстрому». БЭМ как раз заставляет думать на шаг вперёд.

Разбираем на практике

Допустим, нам нужна кнопка. Она может быть основной, ссылкой, аватаром. Включаться/выключаться. Менять размер и цвет. Без системы это превращается в кашу:

<template>  <button :class="{  'button-basic': isBasic,  'button-href': isHref,  'button-avatar': isAvatar  }">    {{ text }}  </button></template>

Что не так?

1. Классы не связаны логически. button-avatar — это вообще состояние, тип или вариант размещения?

2. При добавлении новых состояний (loading, disabled, size-xl) маппинг разрастается.

3. Через полгода никто не вспомнит, какой класс за что отвечает. А править стили будет страшно.

Теперь тот же компонент, но с БЭМ:

<template>  <button :class="[    'button',    {      'button_disabled': disabled,      'button_loading': loading,    },    {      'button_size_xl': size === 'xl',      'button_size_l': size === 'l',    },    {      'button_primary': color === 'primary',      'button_secondary': color === 'secondary',    }  ]">    {{ text }}  </button></template>

Разница в голове. Вы сразу видите:

• Это блок .button.

• У него есть состояния (_disabled, _loading).

• Есть варианты размера и цвета.

• Ничего не переплетается. Каждый класс — одна задача.

А CSS при этом становится предсказуемым:

.button {  /* базовые стили */  ...}.button_disabled {  opacity: 0.5;  ...}.button_loading {  /* стили состояния загрузки */}.button_primary:not(.button_disabled, .button_loading):hover {  background-color: #0055ff;}

Обратите внимание на :not(). Это не требование БЭМ, а приятный бонус. Вы не плодите лишние классы вроде .button_primary_not_disabled. CSS сам фильтрует состояния. Чисто, масштабируемо, легко читать.

Когда БЭМ не нужен?

Если вы пишете лендинг на 2 экрана или прототип на выходные — не мучайте себя. Tailwind или обычные классы справятся быстрее. БЭМ раскрывается там, где есть команда, долгая поддержка и сложная UI-система.

Какой же итог?

Vue отвечает за логику и реактивность. БЭМ отвечает за предсказуемость стилей. Вместе они дают компонент, который не ломается при масштабировании, не пугает новых разработчиков и не превращается в технический долг через полгода.

Не нужно фанатизма. Не нужно слепого следования правилам. Нужно понимание, зачем вы пишете каждый класс. БЭМ просто напоминает об этом.

Попробуйте в следующем компоненте. Если через неделю не станет легче — вернитесь к тому, как было. Но скорее всего, вы уже не захотите.