Estás metiendo el nombre de secccion dentro del modificador (--top-review-section), Estás repitiendo el modificador en varios elementos (review__content--top-review-section, review__author-image-wrapper--top-review-section, etc.).

Define el bloque review normal, y deja que el layaut de la seccion haga el resto.

<section class="top-review-section">
  <article class="review review--highlighted">
    <p class="review__content">
      lorem
    </p>
    <div class="review__author">
      <div class="review__author-image-wrapper">
        <img class="review__author-image" src="" alt="user profile image">
      </div>
      <p class="review__author-username">
        lorem
      </p>
    </div>
  </article>
</section>

/* Bloque review base */
.review { ... }
.review__content { ... }
.review__author { ... }
.review__author-image-wrapper { ... }
.review__author-image { ... }
.review__author-username { ... }

/* Modificador real (intrínseco al bloque, no al contexto) */
.review--highlighted {
  /* por ejemplo: borde, fondo distinto, sombra, etc. */
}

/* Contexto: cómo se ve review DENTRO de top-review-section */
.top-review-section .review {
  /* márgenes, ancho, alineación, etc. específicos de esta sección */
}

.top-review-section .review__content {
  /* ajustes finos solo cuando está en top-review-section */
}

.product-review-section .review {
  /* comportamiento distinto en la sección de producto */
}