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

Что делает элемент независимым?

Если вы поддерживаете страницу с написанным вручную HTML, практический вопрос заключается в том, должна ли растущая секция остаться частью родителя или стать отдельным блоком, который поддерживается независимо. BEM определяет блок как логически и функционально независимый компонент; элемент принадлежит блоку и не может использоваться независимо от него. Блоки могут содержать другие блоки. Ключевые понятия

Представьте учебную страницу с блоком workbench. В его workbench__preview находятся абстрактная фигура, подпись и пояснение. Сначала все три элемента нужны только рабочей области. Позже такой же предварительный просмотр понадобится в узкой области shelf. Второе место размещения дает конкретную задачу по выделению: определите, может ли предварительный просмотр стать блоком shape-tile с собственным оформлением и внутренней структурой.

Одна лишь вложенность не определяет решение. BEM допускает вложенные элементы в DOM, сохраняя плоскую структуру имен: workbench__preview, workbench__label и workbench__caption. Имя вроде workbench__preview__caption ошибочно обозначает элемент, принадлежащий другому элементу. В официальном кратком руководстве также предлагается сервисный блок как вариант для сложного элемента, которому нужны независимо организованные внутренние части. Краткое руководство

Полезно различать перенос разметки в отдельный шаблон ради удобства чтения и создание нового блока BEM. Первое изменение можно внести, не принимая сразу решение о втором. Явно обозначьте границу блока, когда можете описать, за что отвечает выделенная часть, что предоставляет ее контейнер и как будет использоваться другое место размещения.

Проверьте зависимости перед выделением

Следующая схема принятия решения — редакционный метод, основанный на принципе независимости BEM. Это не официальная система оценки. Примените ее к одному предполагаемому поддереву, а не ко всей странице сразу.

Вопрос Признак в пользу выделения Причина оставить элемент
Есть ли у него ясное назначение? «Показывает фигуру с подписью и пояснением» Его назначение — лишь «внутренняя обертка рабочей области»
Может ли он самостоятельно отвечать за внутреннее оформление? Рамка, отступы и типографика перемещаются вместе Эти правила неотделимы от структуры родителя
Может ли контейнер отдельно задавать размещение? Контейнер управляет доступным пространством и окружающими промежутками Для предполагаемого компонента требуется конкретный предок в структуре
Описывают ли его варианты сам компонент? Компактная плитка уместна в нескольких местах Каждый вариант назван в честь определенного родителя
Поможет ли отдельная поддержка уже сейчас? Есть второе место размещения или существенная внутренняя обязанность Выделение создаст интерфейс, которому пока негде применяться

Прежде чем менять код, запишите одно предложение: «shape-tile отвечает за фигуру, подпись, пояснение и внутренние отступы; контейнер отвечает за размещение и доступную ширину». Если предложение продолжает включать расположение колонок рабочей области или порядок соседних элементов, пересмотрите, где должна проходить граница.

Разделяйте внешнее размещение и внутреннее оформление. Руководство BEM по CSS предписывает задавать внешнюю геометрию и позиционирование через родителя и показывает, как сочетать на одном узле класс независимого блока с классом элемента родителя. Такое сочетание называется миксом. Методология CSS

Например, class="shape-tile workbench__preview" может выразить обе идентичности. Пусть shape-tile задает рамку и внутреннюю компоновку, а workbench__preview — размещение. Не задавайте одно и то же свойство через обе идентичности, если только переопределение не является намеренной частью контракта.

Создайте локальный пример для сравнения на Mac

Создайте для этого упражнения новую папку, чтобы сравнить выделенный вариант, не изменяя существующую страницу. Вам понадобятся текстовый редактор и браузер для компьютера; для примера не нужны установка пакетов, JavaScript, загруженные шрифты или файлы изображений.

В TextEdit выберите File > New, затем Format > Make Plain Text. Вставьте HTML ниже и сохраните его как index.html, выбрав при запросе Use .html. Apple описывает эти шаги, а также объясняет, как повторно открыть HTML в виде исходного кода с помощью команды Ignore rich text commands. Работа с HTML-документами в TextEdit на Mac

Создайте полный HTML-документ

В этом документе один и тот же предполагаемый компонент размещен в двух контейнерах. Все подписи вымышленные, а абстрактная фигура нарисована с помощью CSS. Сохраните следующий код как index.html.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape tile boundary exercise</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="demo">
  <h1>Shape tile boundary exercise</h1>
  <main class="demo__regions">
    <section class="workbench">
      <h2>Workbench A</h2>
      <div class="shape-tile workbench__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form A</h3>
          <p class="shape-tile__caption">Rounded sample, first arrangement.</p>
        </div>
      </div>
    </section>
    <section class="shelf">
      <h2>Shelf B</h2>
      <div class="shape-tile shelf__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form B</h3>
          <p class="shape-tile__caption">Rounded sample, second arrangement.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

Добавьте полную таблицу стилей

Создайте в той же папке еще один текстовый файл с именем styles.css. Убедитесь, что его фактическое имя — styles.css, а не styles.css.txt. Вставьте всю таблицу стилей:

/* Page and host styles */
.demo {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px;
  font-family: system-ui, sans-serif;
  background: #f1f3f5;
  color: #243047;
}
.demo__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.workbench,
.shelf {
  box-sizing: border-box;
  padding: 16px;
  max-width: 100%;
  border: 1px dashed #6b778a;
}
.workbench { width: 480px; }
.shelf { width: 256px; }
.workbench__preview { margin-top: 24px; }
.shelf__preview { margin-top: 12px; }

/* Independent component styles */
.shape-tile {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #718096;
  border-radius: 12px;
  background: #fff;
  color: #243047;
  font: 16px/1.5 system-ui, sans-serif;
}
.shape-tile__shape {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 16px 24px 12px 24px;
  background: #536dbe;
}
.shape-tile__content {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shape-tile__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.shape-tile__caption { margin: 6px 0 0; }

Откройте index.html в Safari или другом браузере для компьютера. Предполагается, что вы увидите широкую рабочую область и узкую полку. Плитки используют одинаковое оформление компонента; от доступного пространства зависит, поместятся ли фигура и текст рядом или текст перенесется на новую строку.

Здесь важен контракт ресурса: rel="stylesheet" задает внешний ресурс таблицы стилей, а href="styles.css" указывает нужный этому документу файл. Добавление класса BEM не создает такую ссылку на ресурс. При перемещении примера храните оба файла вместе. Связь между документом и таблицей стилей определена в стандарте HTML. Стандарт HTML: тип ссылки «stylesheet»

Как понять, удалось ли выделение?

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

  1. Проверьте исходный вид. У обеих плиток должны быть белый фон, синяя фигура с закругленными углами, подпись и пояснение. Если все выглядит неоформленным, прежде чем оценивать границу компонента, проверьте имя файла таблицы стилей и ссылку на него.
  2. Удалите класс одного места размещения. Удалите workbench__preview у первой плитки, сохраните файл и перезагрузите страницу. Ее верхний отступ должен измениться, а внутреннее оформление — сохраниться.
  3. Удалите класс одного контейнера. Временно удалите workbench у секции-контейнера. Рамка контейнера и фиксированная ширина должны исчезнуть, а стили плитки — сохраниться.
  4. Измените общий компонент. Измените радиус скругления в .shape-tile. Обе плитки должны измениться без редактирования селекторов контейнеров.
  5. Проверьте длинный текст. Замените одно пояснение на более длинное вымышленное предложение и сузьте окно браузера. Проверьте перенос текста и то, остается ли весь текст видимым.

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

Именование BEM не создает изоляцию стилей, принудительно обеспечиваемую браузером. Наследование CSS продолжается по дереву документа: если каскад не задает для элемента значение, наследуемые свойства получают значения от родителя. Это описано в спецификации CSS Cascading and Inheritance и показано в документации MDN. CSS Cascading and Inheritance Module Level 5, раздел 7.2, Наследование

В примере шрифт и цвет текста плитки намеренно заданы на ее корневом элементе. В реальной странице, напротив, может быть желательно наследовать типографику сайта. Зафиксируйте это как зависимость. Независимость означает, что необходимые условия понятны и переносимы; это не обязательно означает, что внутри каждого компонента нужно повторять все настройки браузера по умолчанию.

В каких случаях стоит оставить элемент?

Оставьте предполагаемый компонент элементом, если его смысл и реализация по-прежнему относятся только к родителю. Обертка, выравнивающая элементы лишь в рабочей области, может содержать множество потомков и при этом не нуждаться в отдельной публичной идентичности. Прежде чем вводить новый блок, уплощите имена BEM и улучшите организацию.

И наоборот, компонент, используемый только один раз, все равно может заслуживать выделения, если он выполняет существенную внутреннюю функцию и его граница зависимостей ясна. Считайте повторное использование подтверждающим признаком, а не обязательным условием с заданным числом применений. В этом упражнении второе место размещения упрощает проверку границы, но не устанавливает универсальное правило «два использования».

Также пересмотрите решение, если при выделении накапливаются варианты, зависящие от контейнера. Имена вроде shape-tile--inside-workbench подсказывают, что размещение становится частью интерфейса компонента. Сначала выясните, не относится ли различие к workbench__preview. Оставляйте вариант компонента для различий, которые можно объяснить в терминах самого компонента.

Меняет ли решение современная изоляция CSS?

Правило @scope может ограничить, где применяются заключенные в него селекторы, что помогает управлять селекторами внутри поддерева документа. Сейчас MDN помечает его как Baseline 2026: оно доступно во всех актуальных версиях браузеров с марта 2026 года, хотя на более старых устройствах или в старых браузерах поддержки может не быть. Не исходите из того, что оно поддерживается на каждом компьютере Mac. Правило CSS @scope

Приведенный пример использует обычные селекторы классов и не требует @scope. Если вы поддерживаете браузеры без изоляции через @scope, оставьте основные стили компонента в этих правилах. Изоляция может упростить выражение границы, но решение о принадлежности все равно требует ясного описания назначения, зависимостей и размещения компонента.

Выделяйте сложный элемент, если можете перенести вместе его назначение и внутреннюю реализацию, оставить окружающую компоновку контейнеру и показать результат в другом контексте. Если эти обязанности остаются переплетенными, пока оставьте элемент на месте и проясните их: одно лишь сокращение имени класса не завершит рефакторинг.

Источники