View all rules
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.
<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 */
}
}
}
<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 */
}