Ygdir - No BEM grandchildren

S16 No BEM grandchildren

Do not attempt to to recreate HTML structures in CSS; the HTML structure can be nested whereas the CSS structure will be flat.

Bad

<div class="c-card">
  <div class="c-card__header">
    <h3>A heading</h3>
  </div>
  <div class="c-card__body">
    <p>...</p>
    <button class="c-card__button">A specific card button</button>
  </div>
</div>

.c-card {
  .c-card__header {
    /* Code */
  }
  .c-card__body {
    /* Code */
    .c-card__button {
      /* Code */
    }
  }
}

Good

<div class="c-card">
  <div class="c-card__header">
    <h3>A heading</h3>
  </div>
  <div class="c-card__body">
    <p>...</p>
    <button class="c-card__button">A specific card button</button>
  </div>
</div>

.c-card {
  /* Code */
}

.c-card__header {
  /* Code */
}

.c-card__body {
  /* Code */
}

.c-card__button {
  /* Code */
}