Trying to solve a frustrating issue with BEM can be quite the challenge. I currently use the BEM methodology for developing UI elements in my application. For example:
<div class="card">
<h2 class="card__title">Sample Title </h2>
<h3 class="card__subtitle">Sub Title </h3>
<button class="card__action">Action Button </button>
</div>The SCSS code for this would look like:
.card {
&__title {color: red}
&__subtitle {color: violet}
&__subtitle {background: black}
}If I want to add a new variation of the card, it would be added as "card--modifier".
.card {
&--variant {background-color: white;}
&__title {color: red;}
&__subtitle {color: violet;}
&__subtitle {background: black;}
}Now, without breaking the nesting in SCSS, how can I modify the properties of a child under the variant?