Как достигается изоляция при использовании методологии БЭМ?

Изоляция достигается за счет уникальных классов для блоков, элементов и их модификаторов.

• Блок: Имеет уникальное имя класса, например, button. Стили, примененные к классу блока, распространяются только на элементы внутри этого блока.
• Элемент: Имеет имя класса, состоящее из имени блока, двух подчеркиваний и имени самого элемента, например, button__text. Стили элемента привязаны к конкретному блоку и не влияют на элементы с тем же именем в другом блоке.
• Модификатор: Имеет имя класса, состоящее из имени блока или элемента, двух дефисов (или одного подчеркивания, в зависимости от соглашения) и имени модификатора, например, button--disabled или button__text_bold. Модификатор добавляет или изменяет свойства существующего блока или элемента, не влияя на другие.

Пример структуры HTML:

<button class="button button--primary">
  <span class="button__icon"></span>
  <span class="button__text">Нажать</span>
</button>

<div class="card">
  <h2 class="card__title">Заголовок</h2>
  <p class="card__text">Текст карты</p>
</div>

Пример CSS:

.button {
  /* Стили только для кнопки */
}

.button--primary {
  /* Стили модификатора только для этой кнопки */
}

.button__icon {
  /* Стили иконки только внутри .button */
}

.button__text {
  /* Стили текста только внутри .button */
}

.card {
  /* Стили только для карточки */
}

.card__title {
  /* Стили заголовка только внутри .card */
}

.card__text {
  /* Стили текста только внутри .card */
}

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