Sign in
Log inSign up

BEM - Extending Child via Parent with nesting

James Wilson's photo
James Wilson
·Jul 16, 2018

Hi Harry,

I haven't seen any particular examples that use this pattern, so I'm not sure if I might be "doing it wrong".

Consider that I have a button:

    <button class="c-button c-button--large">Click Me</button>

And I want to use the button inside a card, but I don't want to have to repeat the styles. And I'd rather make it clear in the markup that the card is extending the styles of the button - as opposed to using a SASS mixin or @extend in the CSS.

  <div class="c-card">
    <button class="c-card__button c-button c-button--large">Click Me</button>
  </div>

The c-card__button class still has low specificity and I DON'T do this with the selectors in my CSS: 

//  I DON'T do this
.c-card__button .c-button {
    // styles
}

So it's not actually nested in the conventional sense - it doesn't increase specificity via nesting.

The c-card__button will add styles that are relevant only in the card - it may be positioning or some extra spacing or whatever - but ultimately those styles would only be relevant when the c-button is used inside the c-card.

1