Can blocks have other blocks as children, or only elements are allowed?

[andrejesuscm]

Imagine the following component:

<div class="card">
    <div class="heading">...</div>
    <div class="card__body">...</div>
    <div class="card__footer">...</div>
</div>

Is it allowed to have another block heading as children of another block, or should we wrap it in another element:

<div class="card">
    <div class="card_heading">
        <div class="heading">...</div>
    </div>
    <div class="card__body">...</div>
    <div class="card__footer">...</div>
</div>

Thanks for the clarification.

[floatdrop]

If heading styles does not rely on card_heading (ex. for positioning or padding inside card) it is perfectly fine to remove card__heading wrapper element.

---

• https://en.bem.info/methodology/quick-start/#guidelines-for-using-blocks

[theKashey]

It can combine element and block in one DOM node, more of it - has not do it.

Rule of thumb - every block is an element. As usual Block cannot specify own dimensions and this part of styling belongs to an “Element” definition.

<div class="card">
    <div class="card__heading heading">...</div>
    <div class="card__body">...</div>
    <div class="card__footer">...</div>
</div>