Como é alcançada a isolamento ao usar a metodologia…

A isolação é alcançada através de classes únicas para blocos, elementos e seus modificadores.

Bloco: Tem um nome de classe único, por exemplo, button. Os estilos aplicados à classe do bloco aplicam-se apenas aos elementos dentro desse bloco.
Elemento: Tem um nome de classe que consiste no nome do bloco, dois underlines e o nome do elemento, por exemplo, button__text. Os estilos do elemento estão ligados a um bloco específico e não afetam elementos com o mesmo nome em outro bloco.
Modificador: Tem um nome de classe que consiste no nome do bloco ou elemento, dois hífens (ou um underline, dependendo do acordo) e o nome do modificador, por exemplo, button--disabled ou button__text_bold. O modificador adiciona ou altera as propriedades de um bloco ou elemento existente, sem afetar outros.

Exemplo de estrutura HTML:

<button class="button button--primary">
  <span class="button__icon"></span>
  <span class="button__text">Carregar</span>
</button>

<div class="card">
  <h2 class="card__title">Título</h2>
  <p class="card__text">Texto do cartão</p>
</div>

Exemplo de CSS:

.button {
  /* Estilos apenas para o botão */
}

.button--primary {
  /* Estilos do modificador apenas para este botão */
}

.button__icon {
  /* Estilos do ícone apenas dentro de .button */
}

.button__text {
  /* Estilos do texto apenas dentro de .button */
}

.card {
  /* Estilos apenas para o cartão */
}

.card__title {
  /* Estilos do título apenas dentro de .card */
}

.card__text {
  /* Estilos do texto apenas dentro de .card */
}

Graças a essa nomenclatura e estrutura de estilos, as regras CSS para um bloco não entram em conflito com as regras para outro, mesmo que contenham elementos com nomes semelhantes. Isso facilita o desenvolvimento, manutenção e reutilização de componentes.

Como é alcançada a isolamento ao usar a metodologia BEM?