1
resposta

Aninhamento de elementos bloco no padrão BEM

Tenho dúvidas em relação aos nomes que colocar quando há aninhamentos dentro do meu HTML.

Dado esse exemplo abaixo:

<section class="box-information">
            <h1 class="box-information__title">xxxxxx</h1>
            <h2 class="box-information__subtitle">xxxxx</h2>
            <div class="box-information__item">
                    <p class="box-information__item__name">xxxxx</p>
                    <p class="box-information__item__value">xxxxxxx</p>
            </div>
</section>

Veja que tenho outro bloco de elemento chamado de "box-information__item", dentro desse elemento, os filhos herdam o nome do pai mais próximo ou do mais distante?

Ou seja, o correto é

box-information__name

ou

box-information__item__name

Abs a todos

1 resposta

Olá, Bruno.

O correto é a segunda opção:

box-information__item__name