search

bem-site / bem-forum-content-en

Content BEM forum for English speak users
3 stars 0 forks source link

Nested elements or new block? #36

Closed woosaj closed 8 years ago

woosaj commented 8 years ago

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?

tadatuta commented 8 years ago

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.

woosaj commented 8 years ago

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

tadatuta commented 8 years ago

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).

woosaj commented 8 years ago

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