Structure
Many components can have structural variations and it can make more sense to have different blocks that can control elements, see the alerts example below.
To differentiate the detail of the blocks use a "-" to provide detail to the block name e.g. .alert and .alert-slim
Nesting
It is possible to nest blocks inside one or another without the need to relate it to the parent blocks.
The example below demonstrates a .button block inside the .alert block.
Hierarchy
BEM utilises numerous classes to style the UI of markup, class names could easily get several levels deep.
To avoid the this, any child or grand child elements only need to relate to the parent block. Keeping names concise to three segments.
Instead of .card__header__title the title element only needs to relate to the parent block.
This is illustrated in the card example below where .card__title and .card__actions sit inside the .card__header.
Modifiers for nested components
Nesting components may require specific customisations. Whilst it may make sense to relate it to the parent block, relating it to the nested block as a modifier creates reusability.
This allows the classes to not be tied to the parent container, specificity or source order to apply the modifications. They can be used throughout the application.
<!-- DO THIS -->
<div class="co-card">
<button class="co-button co-button--expand">Click me!</button>
</div>
<!-- DON'T DO THIS -->
<div class="co-card">
<button class="co-button co-card__button--expand">Click me!</button>
</div>