BEM with nested elements

How would you name clasess in nested elements following BEM?

<div class="review">
    <div class="review__author">
        <img src="./img/image-colton.jpg" alt="Review author foto" class="review__author__img">
        <p class="review__author__data">Colton Smith<span class="isVerified">Verified Buyer</span></p>
    </div>
    <p class="review__opinion">
        "We needed the same printed design as the one we had ordered a week prior.
        Not only did they find the original order, but we also received it in time.
        Excellent!"
    </p>
</div>

<div class="review">
    <div class="review__author">
        <img src="./img/image-colton.jpg" alt="Review author foto" class="review__author__img">
        <p class="review__author__data">Colton Smith<span class="isVerified">Verified Buyer</span></p>
    </div>
    <p class="review__opinion">
        "We needed the same printed design as the one we had ordered a week prior.
        Not only did they find the original order, but we also received it in time.
        Excellent!"
    </p>
</div>

How to avoid xxx__yyy_zzz_www... snakes?

2 Replies

Tenkes•16mo ago

Something like this maybe

<div class="review">
    <div class="review__author">
        <img src="..." alt="..." class="review__author-avatar" />
        <p class="review__author-name">Colton Smith <span class="isVerified">Verified Buyer</span></p>
    </div>
    <p class="review__opinion">
        "We needed the same printed design as the one we had ordered a week prior.
        Not only did they find the original order, but we also received it in time.
        Excellent!"
    </p>
</div>

<div class="review">
    <div class="review__author">
        <img src="..." alt="..." class="review__author-avatar" />
        <p class="review__author-name">Colton Smith <span class="isVerified">Verified Buyer</span></p>
    </div>
    <p class="review__opinion">
        "We needed the same printed design as the one we had ordered a week prior.
        Not only did they find the original order, but we also received it in time.
        Excellent!"
    </p>
</div>

C4rlosOP•16mo ago

img and p in my example are not modifiers if i understand correctly BEM, they are more elements

Gaming

Programming

BEM with nested elements