Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Padrão BEM

Boa tarde,

Gostaria de tirar uma dúvida em relação ao padrão BEM. Por exemplo, tenho um bloco chamado "box-information" e dentro desse bloco tenho um titulo, subtitulo e alguns itens. O ideal é eu chamar esse title de "box-information__title" ou apenas de "title"? (Ou nenhum dos dois..rsrsr)

Seguem dois exemplos do que eu estou falando

1-

<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__name">xxxxx</p>
                    <p class="box-information__value">xxxxxxx</p>
            </div>
</section>
<section class="box-information">
           <h1 class="title">xxxxxx</h1>
            <h2 class="subtitle">xxxx</h2>
            <div class="box-information__item">
                    <p class="name">xxxx</p>
                    <p class="value">xxxxxxx</p>
            </div>
</section>

abs :)

2 respostas

As marcas registradas da estruturação BEM são o uso do “__” e do “- -“: sendo que o primeiro define um elemento (filho do elemento pai), e o segundo define um modificador.

EXEMPLO->>>>>>>>>>>>>

.formcontent (elemento pai)
.formcontent__field (elemento filho)
.formcontent__field--first (elemento filho modificado)






Você deveria usar box-information__title, porque é filho de section.
solução!

Oi Bruno,

Se esse título é uma coisa que sempre vai estar somente dentro de um box-information, vá de box-information__title. Se esse título for usado em outros lugares, isso quer dizer que você deveria criar um block/componente só pra ele e poderia sim ter essa classe title.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software