BEM e SMACSS | Front-end: Projeto de conclusão

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso Front-end: Projeto de conclusão

por Gabriela Pinheiro

| 147.4k xp | 31 posts

Olá Devers,

Lendo o artigo sobre organização de CSS que o Yuri Padrilha postou no blog, e depois sua sequência sobre o padrão BEM , me surgiu a seguinte dúvida:

Se no padrão SMACSS utilizamos o 1. Base 2. Layout 3. Module 4. State 5. Theme e o BEM vai nos mostrar uma forma de criar os nome com block__element--modifier, isso significa que teríamos blocos no nosso código HTML com nomes fora do padrão BEM para atendermos o 3. Module do SMACSS, por exemplo?

No exemplo do Yuri, ele cita dois arquivos que possuem .box & .title & .imagem, porém eles pertencem à div's diferentes. Nesse caso então teríamos uma "puladinha de cerca" no padrão BEM para podermos ter um arquivo Module? Ou não?

Obrigada desde já!!!

2 respostas

por Giovane Santos Silva

| 508.8k xp | 6 posts

Desenvolvedor de front-end

25/05/2021

Boa tarde, Gabriela!

Não sei se entendi corretamente, mas no padrão BEM ele vai se desencadeando, como por exemplo:

<div class="card">
    <div class="card__container">
        <h2 class="card__container--title">Titulo</h2>
        <h3 class="card__container--subtitle">Subtitulo</h3>
    </div>
</div>

Se consegui ajudar em algo fico grato!

solução!

por Gabriela Pinheiro

| 147.4k xp | 31 posts

26/05/2021

Oi Giovanne, o que disse sobre o BEM é correto, e eu entendo esse ponto. Minha dúvida é como conciliar o BEM com o SMACSS.

Fui revisar pra escrever minha resposta e consegui entender a minha questão original rsrsrs, porque o Module na verdade vai falar de trechos de página que se repetem, como o footer e a nav, por exemplo. E neste caso dá pra ser especifico normalmente, porque as classes vão se repetir nos trechos de html, mas vão conseguir puxar o estilo de um único css.

Obrigada de qualquer forma. Bons estudos.