¿Cómo se logra el aislamiento al usar la metodología…

La isolación se logra mediante clases únicas para bloques, elementos y sus modificadores.

Bloque: Tiene un nombre de clase único, por ejemplo, button. Los estilos aplicados a la clase del bloque solo se aplican a los elementos dentro de ese bloque.
Elemento: Tiene un nombre de clase que consiste en el nombre del bloque, dos guiones bajos y el nombre del elemento, por ejemplo, button__text. Los estilos del elemento están vinculados a un bloque específico y no afectan a los elementos con el mismo nombre en otro bloque.
Modificador: Tiene un nombre de clase que consiste en el nombre del bloque o elemento, dos guiones (o un guion bajo, dependiendo del acuerdo) y el nombre del modificador, por ejemplo, button--disabled o button__text_bold. El modificador añade o cambia las propiedades de un bloque o elemento existente, sin afectar a otros.

Ejemplo de estructura HTML:

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

<div class="card">
  <h2 class="card__title">Título</h2>
  <p class="card__text">Texto de la tarjeta</p>
</div>

Ejemplo de CSS:

.button {
  /* Estilos solo para el botón */
}

.button--primary {
  /* Estilos del modificador solo para este botón */
}

.button__icon {
  /* Estilos del icono solo dentro de .button */
}

.button__text {
  /* Estilos del texto solo dentro de .button */
}

.card {
  /* Estilos solo para la tarjeta */
}

.card__title {
  /* Estilos del título solo dentro de .card */
}

.card__text {
  /* Estilos del texto solo dentro de .card */
}

Gracias a esta nomenclatura y estructura de estilos, las reglas CSS para un bloque no entran en conflicto con las reglas para otro, incluso si contienen elementos con nombres similares. Esto facilita el desarrollo, el mantenimiento y la reutilización de componentes.

¿Cómo se logra el aislamiento al usar la metodología BEM?