Nested elements or new block?

Forum /

Hello, I'm new to BEM and I want to get opinion on something, so lets say I have blog post, in blog post we have title, badge, summary, figure ... below is the example of my html

    <div class="post">
        <h1 class="post__title">This is title</h1> 
        <summary class="post__summary">
            Some text here
        </summary>
        <figure class="post__figure figure">
            <img class="figure__image" src="">  
            <figcaption class="figure__caption">Some text</div> 
        </figure>
    </div>

So should I do .post_figure and then inside .post__figure__image and .post__figure__caption or should i create new block like in example?

8 years ago

tadatuta

Hi, @woosaj!

You shouldn't reflect DOM structure in naming. Code of the example is just great.

See https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2 for more details.

8 years ago

woosaj

@tadatuta, Thanks for quick answer. If I understand correct your first sentence is I shouldn't use <figure class="figure"> but something else?

8 years ago

tadatuta

figure is just ok if it's really a figure semantically. By saying not to reflect DOM structure I meant nesting in elements naming (post__figure and figure__image are good and post__figure__image is not).

8 years ago

woosaj

Thanks for deeper clarification. I'm really liking BEM so far :)

In order to leave a comment you need to login.